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内 容 简介 


本 书 是 以 项 目 制 教学 方式 介绍 静态 网 站 制作 技术 的 教材 ,通过 网 站 制作 项 目 介 绍 使 用 HTML 标记 、 
CSS 样式 表 、Dreamweaver、Fireworks 制作 静态 网 站 的 技术 。 

本 书 共 分 6 章 , 内 容 包 括 网 站 项 目 及 网 站 概念 ,使 用 HTML 标记 制作 网 页 、 使 用 CSS 样式 表 制 作 网 
页 .使 用 Dreamweaver 制作 网 页 、 网 页 图 像 编 辑 、Flash 网 页 动画 制作 。 

本 书 将 整个 教学 过 程 围 绕 一 个 教学 项 目 进行 ,通过 完成 教学 项 目 使 学 生 和 掌握 静态 网 站 制作 技能 及 相 
关 知 识 ,实现 “ 做 中 学 ”; 学 生 在 课程 学 习 中 完成 自己 的 网 站 制作 实 训 项 目 ,实现 “学 中 做 ”。 

本 书 是 面向 高 职高 专 网 页 制作 课程 的 教材 ,也 适合 其 他 类 院 校 学 生 使 用 ,同时 可 作为 自学 教材 使 用 。 
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学 科 体 系 的 解构 与 行动 体系 的 重 构 


一 一 “工作 过 程 导向 ”新 理念 教材 代 序 


职业 教育 作为 一 种 教育 类 型 ,其 课程 也 必须 有 自己 的 类 型 特征 。 从 教育 学 的 观点 来 看 ， 
当 且 仅 当 课程 内 容 的 选择 以 及 所 选 内 容 的 序 化 都 符合 职业 教育 的 特色 和 要 求 之 时 ,职业 教 
育 的 课程 改革 才能 成 功 。 这 里 ,改革 的 成 功 与 否 有 两 个 决定 性 的 因素 : 一 个 是 课程 内 容 的 
选择 ; 一 个 是 课程 内 容 的 序 化 。 这 也 是 职业 教育 教材 编写 的 基础 。 

首先 ,课程 内 容 的 选择 涉及 的 是 课程 内 容 选择 的 标准 问题 。 

个 体 所 具有 的 智力 类 型 大 致 分 为 两 大 类 : 一 是 抽象 思维 ; 一 是 形象 思维 。 职 业 教 育 的 
教育 对 象 ,依据 多 元 智能 理论 分 析 , 其 逻辑 数理 方面 的 能 力 相 对 较 差 ,而 空间 视觉 .身体 动 觉 
以 及 音乐 节奏 等 方面 的 能 力 则 较 强 。 故 职业 教育 的 教育 对 象 是 具有 形象 思维 特点 的 个 体 。 

一 般 来 说 ,课程 内 容 涉 及 两 大 类 知识 : 一 类 是 涉及 事实 、 概 念 以 及 规律 .原理 方面 的 “ 陈 
述 性 知识 ”; 一 类 是 涉及 经 验 以 及 策略 方面 的 “过 程 性 知识 ”。“ 事 实 与 概念 "解答 的 是 “是 什 
么 ”的 问题 ,“ 规 律 与 原理 ”回答 的 是 “为 什么 "的 问题 ; 而 “经 验 ” 指 的 是 “怎么 做 ”的 问题 ,“ 策 
略 ? 强 调 的 则 是 “怎样 做 更 好 ?的 问题 。 

由 专业 学 科 构 成 的 以 结构 逻辑 为 中 心 的 学 科 体 系 ,侧重 于 传授 实际 存在 的 显 性 知识 即 
理论 性 知识 ,主要 解决 “是 什么 (事实 ,概念 等 ) 和 "为 什么 "(规律 .原理 等 ) 的 问题 ,这 是 培养 
科学 型 人 才 的 一 条 主要 途径 。 

由 实践 情境 构成 的 以 过 程 逻 辑 为 中 心 的 行动 体系 ,强调 的 是 获取 自我 建构 的 隐 性 知识 
即 过 程 性 知识 ,主要 解决 “怎么 做 (经验) 和 "怎样 做 更 好 ”( 策 略 ) 的 问题 ,这 是 培养 职业 型 人 
才 的 一 条 主要 途径 。 

因此 ,职业 教育 课程 内 容 选 择 的 标准 应 该 以 职业 实际 应 用 的 经 验 和 策略 的 习 得 为 主 , 以 
适度 够 用 的 概念 和 原理 的 理解 为 辅 , 即 以 过 程 性 知识 为 主 \ 陈 述 性 知识 为 辅 。 

其 次 ,课程 内 容 的 序 化 涉及 的 是 课程 内 容 序 化 的 标准 问题 。 

知识 只 有 在 序 化 的 情况 下 才能 被 传递 ,而 序 化 意味 着 确立 知识 内 容 的 框架 和 顺序 。 职 
业 教 育 课程 所 选取 的 内 容 , 由 于 既 涉 及 过 程 性 知识 ,又 涉及 陈述 性 知识 ,因此 ,寻求 这 两 类 知 
识 的 有 机 融合 ,就 需要 一 个 恰当 的 参照 系 ,以 便 能 以 此 为 基础 对 知识 实施 “ 序 化 ”。 

按照 学 科 体 系 对 知识 内 容 序 化 ,课程 内 容 的 编排 呈现 出 一 种 “平行 结构 ”的 形式 。 学 科 
体系 的 课程 结构 常会 导致 陈述 性 知识 与 过 程 性 知识 的 分 割 、 理 论 知识 与 实践 知识 的 分 割 ,以 
及 知识 排序 方式 与 知识 习 得 方式 的 分 割 。 这 不 仅 与 职业 教育 的 培养 目标 相悖 ,而 且 与 职业 
教育 追求 的 整体 性 学 习 的 教学 目标 相悖 。 

按照 行动 体系 对 知识 内 容 序 化 ,课程 内 容 的 编排 则 呈现 一 种 * 串 行 结构 ?的 形式 。 在 学 
习 过 程 中 ,学 生 认 知 的 心理 顺序 与 专业 所 对 应 的 典型 职业 工作 顺序 ,或 是 对 多 个 职业 工作 过 
程 加 以 归纳 整合 后 的 职业 工作 顺序 ,即行 动 顺序 ,都 是 串 行 的 。 这 样 , 针 对 行动 顺序 的 每 一 
个 工作 过 程 环节 来 传授 相关 的 课程 内 容 , 实 现实 践 技能 与 理论 知识 的 整合 ,将 收 到 事半功倍 
的 效果 。 鉴 于 每 一 行动 顺序 都 是 一 种 自然 形成 的 过 程序 列 , 而 学 生 认 知 的 心理 顺序 也 是 循 
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序 渐进 自然 形成 的 过 程序 列 ,这 表明 , 认 知 的 心理 顺序 与 工作 过 程 顺序 在 一 定 程度 上 是 吻 
合 的 。 

需要 特别 强调 的 是 ,按照 工作 过 程 来 序 化 知识 , 即 以 工作 过 程 为 参照 系 , 将 陈述 性 知识 
与 过 程 性 知识 整合 理论 知识 与 实践 知识 整合 ,其 所 呈现 的 知识 从 学 科 体系 来 看 是 离散 的 、 
跳跃 的 和 不 连续 的 ,但 从 工作 过 程 来 看 , 却 是 不 离散 的 , 非 跳 跃 的 和 连续 的 了 。 因 此 ,参照 系 
在 发 挥 着 关键 的 作用 。 课 程 不 再 关注 建筑 在 静态 学 科 体系 之 上 的 显 性 理论 知识 的 复制 与 再 
现 ,而 更 多 的 是 着 眼 于 蕴涵 在 动态 行动 体系 之 中 的 隐 性 实践 知识 的 生成 与 构建 。 这 意味 着 ， 
知识 的 总 量 未 变 , 知 识 排序 的 方式 发 生变 化 , 正 是 对 这 一 全 新 的 职业 教育 课程 开发 方案 中 所 
蕴涵 的 革命 性 变化 的 本 质 概括 。 

由 此 ,我 们 可 以 得 出 这 样 的 结论 : 如 果 “ 工 作 过 程 导向 的 序 化 ”获得 成 功 ,那么 传统 的 学 
科 课 程序 列 就 将 “出 局 ”, 通 过 对 其 保持 适当 的 “有 距离 观察 ”, 就 有 可 能 解放 与 扩展 传统 的 课 
程 视野 ,寻求 现代 的 知识 关联 与 分 离 的 路 线 , 确 立 全 新 的 内 容 定 位 与 支点 ,从 而 凸现 课程 的 
职业 教育 特色 。 因 此 ,“ 工 作 过 程 导 向 的 序 化 ”是 一 个 与 已 知 的 序列 范畴 进行 的 对 话 , 也 是 与 
课程 开发 者 的 立场 和 观点 进行 对 话 的 创造 性 行动 。 这 一 行动 并 不 是 简单 地 排斥 学 科 体系 ， 
而 是 通过 “有 距离 观察 ”, 在 一 个 全 新 的 架构 中 获得 对 职业 教育 课程 论 的 元 层次 认 知 。 所 以 ， 
“工作 过 程 导向 的 课程 ”的 开发 过 程 ,实际 上 是 一 个 伴随 学 科 体 系 的 解构 而 凸显 行动 体系 的 
重 构 的 过 程 。 然 而 ,学 科 体系 的 解构 并 不 意味 着 学 科 体 系 的 “肢解 ”, 而 是 依据 职业 情境 对 知 
识 实施 行动 性 重 构 , 进 而 实现 新 的 体系 一 一 行动 体系 的 构建 过 程 。 不 破 不 立 , 学 科 体 系 解构 
之 后 ,在 工作 过 程 基础 上 的 系统 化 和 结构 化 的 产物 一 一 行动 体系 也 就 “ 立 在 其 中 ”了 。 

非常 高 兴 , 作 为 中 国 “ 学 科 体系 ”最 高 殿堂 的 清华 大 学 ,开始 关注 占 人 类 大 多 数 的 具有 形 
象 思维 这 一 智力 特点 的 人 群 成 才 的 教育 一 一 职业 教育 。 坚 信 清 华 大 学 出 版 社 的 豁 智之 举 ， 
将 会 在 中 国教 育 界 掀起 一 股 新 风 。 我 为 母校 感到 自豪 ! 
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网 页 设计 制作 与 网 站 开发 技术 是 目前 非常 流行 的 计算 机 网 络 应 用 技术 
之 一 。 就 目前 的 计算 机 应 用 技术 而 言 ,几乎 绝 大 多 数 是 网 络 应 用 技术 ,其 中 
网 站 技术 更 是 热 中 之 热 。 社 会 对 网 站 开发 技术 人 才 的 需求 非常 迫切 。 

在 目前 的 网 站 开发 技术 中 , 主要 分 为 两 大 阵营 : 一 是 基于 Sun 的 J2EE 
技术 ; 二 是 微软 的 . NET 技术 。 但 是 无 论 使 用 哪 种 网 站 技术 ,都 需要 
HTML、CSS 等 基础 技术 的 支持 ,需要 有 网 页 制作 的 基本 知识 ,所 以 网 页 制作 
课程 是 非常 受 学 生 欢 迎 的 课程 ,也 是 目前 计算 机 专业 甚至 非 计算 机 专业 必 开 
课程 之 一 ,高 职高 专 计算 机 类 专业 中 网 页 制作 课程 的 开设 就 更 为 普遍 。 本 书 
是 为 高 职高 专 学 生 编写 的 网 页 制作 教材 。 

全 面 的 网 站 技术 课程 一 般 应 包括 HTML 标记 、CSS 样式 表 、JavaScript、 
XML、Web 服务 器 技术 (如 JSP、ASP、ASP. NET、J2EE) 等 内 容 。 不 涉及 
Web 服务 器 技术 的 网 页 称 为 静态 网 页 (或 者 说 网 页 内 容 在 任何 人 访问 时 都 不 
会 发 生变 化 的 网 页 ) ,而 动态 网 页 需要 Web 服务 器 技术 才能 实现 (如 用 户 登 
录 、 聊 天 室 .电子 商务 网 站 等 )。 这 些 内 容 不 可 能 在 一 门 课程 中 全 部 完成 ,一 
般 需 要 3 门 以 上 的 系列 课程 。 本 书 的 编写 指导 思想 是 仅 完成 网 站 制作 技术 
系列 课程 的 一 部 分 , 即 静态 网 页 制作 技术 培养 。 只 作为 网 站 技术 课程 的 基 
础 ,而 不 涉及 动态 网 页 内 容 。 

本 书面 向 初学 者 介绍 网 页 制作 的 基础 知识 ,包括 HTML 常用 标记 、 
HTML 的 扩展 技术 CSS、 专 业 可 视 化 网 页 编辑 工具 Dreamweaver、 网 页 图 像 
处 理工 具 Fireworks、 网 页 动画 制作 工具 Flash。 由 于 在 静态 网 站 技术 中 对 各 
种 工具 的 功能 要 求 不 是 很 高 ,所 以 本 书 中 只 针对 项 目 任 务 介绍 实现 的 方法 ， 
而 不 针对 某 个 版 本 的 工具 。 

本 书 采用 项 目 制 教学 方法 ,整个 教学 过 程 围绕 一 个 静态 网 站 制作 实 训 项 
目 进行 。 网 站 的 内 容 与 效果 设计 请 参见 配套 教学 资源 (登录 清华 大 学 出 版 社 
网 站 下 载 ) ,或 浏览 http://www. tingdaily. com/flash/web。 

网 站 中 的 各 个 栏目 是 教学 章节 的 内 容 , 栏 目 中 包括 体现 该 章 教学 内 容 的 
若干 页 面 。 通 过 完成 各 个 教学 任务 ,使 学 生 掌握 静态 网 站 制作 技能 及 相关 知 
识 ,实现 “做 中 学 ”。 学 生 在 课程 学 习 中 需要 按照 该 网 站 的 整体 架构 设计 、 网 
页 参数 设计 、 网 页 效果 设计 ,利用 自己 的 素材 完成 每 章 实 训 内 容 中 规定 的 实 
训 任务 ,完成 自己 的 静态 网 站 制作 实 训 项 目 , 实 现 * 学 中 做 ”。 实 训 项目 只 是 
帮助 学 生 掌握 基本 的 静态 网 站 制作 基本 技能 ,制作 实用 性 较 强 的 网 站 项 目 可 
以 通过 综合 实 训 完成 。 

本 书 共 分 为 6 章 。 第 1 章 介绍 网 站 的 基本 概念 , 实 训 内 容 为 网 站 首页 的 
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编辑 与 发 布 ; 第 2 章 介绍 使 用 HTML 标记 制作 网 页 ,项 目 内 容 为 制作 框架 结构 网 页 ; 第 3 
章 介绍 使 用 CSS 样式 表 制作 网 页 ,项目 内 容 为 制作 表格 布局 嵌入 式 框架 结构 网 页 ; 第 4 章 
介绍 Dreamweaver 网 页 编辑 工具 ,项 目 内 容 为 制作 利用 层 、 行 为 等 技术 的 网 页 ; 第 5 章 介 绍 
Fireworks 图 像 编辑 工具 ,项 目 内 容 为 使 用 Fireworks 制作 网 页 ; 第 6 章 介绍 动画 制作 工具 
Flash, 项 目 内 容 为 使 用 Flash 制作 网 页 。 

建议 课堂 讲授 学 时 为 40 学 时 左右 ,上 机 实 训 课 时 为 50 学 时 或 更 多 。 最 好 是 采用 “教学 
做 一 体 化 ”教学 模式 。 

学 生 在 按照 教材 要 求 完 成 实 训 项 目 时 ,除了 需要 准备 自己 的 图 片 素材 之 外 ,还 需要 使 用 教 
材 中 指定 的 一 些 图 片 动画 等 ,这 些 资 料 一 并 放 在 配套 教学 资源 中 (http://www. tingdaily. 
comyflash/download ,或 登录 清华 大 学 出 版 社 网 站 下 载 ) 。 

网 页 制作 技术 涉及 的 工具 较 多 ,网 页 效果 设计 很 难 做 到 较 佳 , 书 中 存在 的 不 足 和 朴 漏 之 
处 , 望 广大 读者 给 予 批评 指正 。 作 者 邮箱 为 tiangl163@163. com。 
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网 站 项 目 及 网 站 概念 


其 一 流 


本 教材 采用 项 目 制 教学 方法 ,整个 教学 过 程 围绕 一 个 “静态 网 站 制作 实 训 网 站 ”项目 进 
行 。 该 教学 项 目 是 一 个 包含 全 书 内 容 的 网 站 ,每 章 教学 内 容 是 教学 项 目 网 站 中 的 一 个 栏目 ， 
各 个 栏目 中 包括 体现 该 章 教 学 内 容 的 若干 页 面 ,为 了 便于 叙述 ,各 个 栏目 称 作 一 个 栏目 
网 站 。 

课程 实 训 项 目 是 利用 自己 的 素材 完成 每 章 实 训 内 容 中 规定 的 实 训 任务 ,每 章 的 实 训 任 
务 基 本 是 按照 教学 项 目 网 站 内 容 与 效果 的 设计 完成 自己 的 一 个 栏目 主题 网 站 制作 ,最 终 完 
成 自己 的 “静态 网 站 制作 实 训 网 站 ”。 


1.1 静态 网 站 制作 实 训 网 站 项 目 


1.1.1 项 目 总 体 设计 
“静态 网 站 制作 实 训 网 站 ”项 目 整体 结构 如 图 1-1 所 示 。 


静态 网 站 制作 实 训 网 站 
Index.html 


1 1 | i 1 


prac2.html prac3.html prac4.html pracs.html | | prac6.html 


和 OO 


1-1 “静态 网 站 制作 实 训 网 站 ”项目 整 体 结构 


所 有 教学 内 容 组 织 为 一 个 实 训 教学 网 站 。 网 站 中 的 各 个 栏目 为 各 个 章节 的 教学 内 容 
(栏目 子 项 目 ) ,其 中 prac2. html 栏目 主要 介绍 使 用 HTML 标记 制作 网 页 (HTML 标记 栏 
目 ); prac3. html 栏目 主要 介绍 使 用 CSS 样式 表 制 作 网 页 (CSS 样式 栏目 ); prac4. html 栏 
目 主要 介绍 使 用 可 视 化 网 页 编辑 工具 Dreamweaver 制作 网 页 (网 页 编辑 工具 栏目 ); prac5. 
html 栏目 主要 介绍 使 用 图 像 编 辑 工具 编辑 网 页 图 像 和 使 用 图 像 编 辑 工具 制作 网 页 (网 页 图 
像 编 辑 栏目 ); prac6. html 栏目 主要 介绍 使 用 动画 制作 工具 Flash 制作 网 页 动画 (Flash 动 
画 栏 目 ) 。 


1.1.2 和 敬 态 网 站 制作 实 训 网 站 " 项 目 首页 设计 
网 站 首页 设计 如 图 1-2 所 示 , 其 中 5 个 导航 按钮 链接 到 5 个 栏目 首页 。 各 个 栏目 的 设 
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计 在 相关 章节 中 描述 。 静 态 网 站 制作 实 训 网 站 项 目的 所 有 内 容 与 效果 设计 可 参见 配套 教学 
资源 或 浏览 http://www. tingdaily. com/flash/web 网 站 。 


班级 ; 计 1236 班 


图 1-2 “静态 网 站 制作 实 训 网 站 ”首页 设计 


1.1.3 教学 项 目 网 站 站 点 目录 结构 


(1) 站 点 根 文件 夹 : 存放 网 页 文件 及 子 目录 。 

(2) images 文件 夹 : 存放 网 页 中 使 用 的 图 片 .GIF 动画 素材 。 
(3) flashes 文件 夹 : 存放 网 页 中 使 用 的 Flash 动画 文件 。 
(4) buttons 文件 夹 : 存放 网 页 中 使 用 的 按钮 文件 。 

(5) slices 文件 夹 : 存放 网 页 中 使 用 的 切片 文件 。 

(6) waves 文件 夹 : 存放 网 页 中 使 用 的 声音 文件 。 


1.1.4 项 目 教学 实 训 环境 


为 了 完成 实 训 网 站 项 目的 制作 ,达到 * 做 中 学 .学 中 做 ?的 教学 效果 ,学 生 需 要 根据 实 训 
任务 准备 自己 的 图 片 文 字 素材 ,完成 自己 的 实 训 网 站 项 目 制作 。 完 成 实 训 项 目 需要 的 实 训 
环境 如 下 。 

(1) 网 页 编辑 计算 机 。 需 要 安装 8.0 以 上 版 本 的 Dreamweaver、Fireworks、Flash 以 及 
CuteFTP 工具 。 

(2) Web 服务 器 。 在 校园 网 或 在 Internet 上 提供 Web 服务 器 ,最 好 有 注册 的 域名 。 在 
Web 服务 器 上 为 每 个 学 生 创 建 一 个 站 点 目录 ,用 于 学 生发 布 网 站 (以 下 称 Web 服务 器 站 点 
或 远程 站 点 )。 网 站 默认 首页 文件 名 设置 为 Index. html。 在 学 生发 布 网 站 后 ,可 以 通过 
“http://Web 服务 器 域名 地 址 /学 号 ?浏览 自己 发 布 的 网 站 。 


第 1 章 网 站 项 目 及 网 站 概念 个 {EE) 


(3) 在 Web 服务 器 安装 Serv_U 软件 ,为 每 个 学 生 开设 一 个 FTP 账户 ,学 生 可 以 通过 
FTP 方式 将 实 训 网 站 发 布 到 自己 的 远程 网 站 根 目 录 中 。 

(4) 学 生 实 训 需要 在 本 地 计算 机 上 的 站 点 目录 中 进行 (以 下 称 本 地 站 点 )。 为 了 保证 实 
训 的 顺利 ,每 个 学 生 最 好 准备 一 个 U 盘 , 用 于 保存 本 地 站 点 中 的 文件 。 本 地 站 点 可 以 存放 
在 U 盘 上 ,也 可 以 存放 在 本 地 硬盘 上 。 如 果 本 地 站 点 存放 在 硬盘 上 ,注意 每 次 实 训 之 后 需 
要 将 本 地 站 点 复制 到 U 盘 保 存 , 下 次 实 训 时 再 将 本 地 站 点 复制 到 硬盘 (如 果 使 用 网 络 硬盘 
等 方式 保存 本 地 站 点 文件 ,每 次 实 训 前 需要 从 网 络 资源 上 恢复 本 地 站 点 ) 。 


1.1.5 实 训 教学 资源 


实 训 教学 项 目 网 站 的 设计 内 容 与 效果 可 参见 配套 教学 资源 或 浏览 http://www. 
tingdaily. com/flash/web 网 站 。 

实 训 中 除了 学 生 自 己 准 备 的 图 片 素材 之 外 ,其 他 图 片 .GIF 动画 、Flash 动画 素材 以 及 
网 站 首页 中 使 用 的 导航 按钮 可 以 从 配套 教学 资源 中 得 到 ,也 可 以 从 http://www. tingdaily. 
com/flash/download 网 站 中 下 载 。 

教学 项 目 网 站 使 用 的 素材 ,也 可 以 从 上 述 教学 资源 网 站 中 下 载 。 


1.2 网 站 简单 工作 原理 


Internet 的 发 展 使 世界 进入 了 真正 的 计算 机 网 络 时 代 。 网 络 信息 、 网 络 商店 、 网 络 游 
戏 、 网 络 电影 …… 人 们 的 生活 已 经 离 不 开 Internet 了 。Internet 网 络 对 人 们 生活 的 影响 源 
于 该 网 络 提供 的 网 络 服务 。 在 Internet 网 络 上 ,目前 人 们 使 用 最 多 的 服务 有 WWW 信息 浏 
览 .E-mail 和 FTP 文 件 传 输 ,其 中 WWW 信息 浏览 是 Internet 网 络 中 最 为 精彩 的 服务 
内 容 。 

WWW(World Wide Web, 万 维 网 ), 又 简称 为 Web。 其 实 网 络 信息 浏览 .网 络 书店 等 都 
是 由 Web 网 站 提供 的 服务 。 在 Internet 网 络 中 ,所 有 的 计算 机 可 以 分 为 两 类 : 服务 器 和 客 
户 机 。 

服务 器 是 安装 了 某 种 服务 软件 的 计算 机 ,根据 安装 的 服务 软件 种 类 可 以 分 为 Web 服务 
器 .FTP 服务 器 .电子 邮件 服务 器 数据库 服务 器 .DNS 服务 器 等 。 当 然 在 一 台 计 算 机 上 也 
可 以 安装 几 个 服务 软件 , 它 可 以 提供 几 种 网 络 服务 。Web 服务 器 就 是 提供 WWW 信息 服 
务 的 网 站 服务 器 。 一 般 所 说 的 网 站 都 是 建立 在 Web 服务 器 上 的 信息 服务 站 点 。 本 书 中 的 
“网 站 ”就 是 指 Web 网 站 。 

在 Internet 网 络 中 ,用 户 用 于 浏览 信息 的 计算 机 一 般 称 作 浏 览 器 ,是 安装 了 解释 网 页 显 
示 格 式 软件 的 计算 机 。 在 Windows 系统 中 ,由 于 该 系统 捆绑 了 Internet Explorer( 简 称 IE) 
软件 ,所 以 都 可 以 作为 浏览 器 使 用 。 在 服务 器 上 安装 了 浏览 器 软件 后 ,那么 它 既是 服务 器 又 
是 浏览 器 。 

网 站 就 是 按照 约定 存放 在 Web 服务 器 上 的 一 组 网 页 文件 及 相关 素材 。 在 Internet 网 
络 上 ,无 论 Web 服务 器 的 位 置 在 哪里 ,只 要 知道 服务 器 的 地 址 (域名 或 IP 地 址 ) ,使 用 浏览 
器 就 可 以 访问 该 网 站 。 使 用 浏览 器 访问 Web 网 站 的 过 程 如 图 1-3 所 示 。 

在 浏览 器 的 地 址 栏 中 输入 一 个 Web 网 站 的 域名 或 IP 地 址 后 ,浏览 器 通过 网 络 线路 向 
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指定 的 Web 服务 器 发 出 一 个 HTTP 请 求 。HTTP 
| 是 Internet 网 络 中 的 超 文本 传输 协议 , 用 于 申请 

memet > 浏览 器 。 WWW 网 络 资源 。 一 般 在 访问 网 站 时 都 可 以 看 到 浏 

wy 览 器 地 址 栏 中 网 站 地 址 前 有 http:// 前 绥 。 在 浏览 器 

NS 设置 中 ,HTTP 协议 是 默认 的 ,即便 没有 http:// 前 

缀 ,浏览 器 也 会 发 出 HTTP 请 求 (所 以 ,如 果 申 请 
FTP 资源 时 就 不 能 省 略 FTP:// 前 级 )。 

Web 服务 器 收 到 HTTP 请 求 之 后 ,如 果 在 HTTP 请 求 中 没有 指明 请 求 的 网 页 文件 ， 
Web 服务 器 就 会 把 一 个 默认 的 网 页 文件 发 送 给 浏览 器 。 这 个 默认 的 网 页 文件 一 般 称 作 网 
站 首页 。 在 打开 网 站 首页 后 再 单 击 其 中 的 超 链 接 时 ,浏览 器 会 将 该 超 链 接 指向 的 网 页 文件 加 
入 地 址 信息 中 ,再 向 Web 服务 器 发 出 一 个 HTTP 请 求 。Web 服务 器 根据 HTTP 请 求 中 的 
文件 信息 将 指定 的 网 页 文件 发 送 给 浏览 器 。 

无 论 浏览 器 请 求 的 网 页 文件 是 什么 类 型 的 (如 .html、. asp、. jsp、. aspx 等 ), Web 服务 
器 总 是 给 浏览 器 发 回 扩 展 名 是 . html 的 网 页 文件 , 即 HTML 文件 。 也 就 是 说 浏览 器 上 只 能 
看 到 . html 类 型 的 网 页 文件 ,因为 浏览 器 只 能 解释 HTML 文件 。 

扩展 名 是 . asp、. jsp、. aspx 的 网 页 文件 都 是 在 Web 服务 器 上 执行 的 文件 。 浏 览 器 在 请 
求 这 些 类 型 的 文件 时 ,Web 服务 器 需要 根据 请 求 者 提供 的 内 容 生 成 一 个 扩展 名 是 . html 的 
网 页 发 送 给 浏览 器 ,而 不 是 发 送 用 户 请 求 类 型 的 网 页 原文 件 。 


1.3 网 站 的 基本 概念 


图 1-3 浏览 器 访问 Web 网 站 的 过 程 


1.3.1 网 页 与 网 站 


网 页 就 是 浏览 Web 网 站 时 看 到 的 一 个 个 页 面 ,也 称 作 Web 页 、 页 面 。 网 页 是 由 
HTML 标记 构成 的 文本 文件 。 网 页 中 一 般 包括 文本 、 图 像 \ 动 画 、 超 链接 等 网 页 元 素 ,所 以 
网 页 又 称 为 HTML 文档 或 超 文本 文档 。 

网 站 是 一 组 内 容 相关 的 、 通 过 超 链接 标记 链接 在 一 起 的 网 页 文件 。 将 该 组 文件 存放 在 
Web 服务 器 上 硬盘 的 某 个 目录 下 (例如 Windows 系统 中 Web 服务 器 默认 存放 网 站 的 目录 
是 服务 器 安装 驱动 器 根 目 录 下 的 Inetpub\wwwroot 文件 夹 ), 通 过 设置 Internet 信息 服务 
(IIS) 的 网 站 IP 地 址 属性 (指向 服务 器 的 IP 地 址 )、 主 目录 属性 (指向 存放 网 站 文件 的 目录 ) 
和 文档 属性 (声明 默认 打开 的 首页 文件 名 ) 之 后 ,在 浏览 器 上 的 地 址 栏 中 输入 *http:// 域 名 ” 
或 “IP 地 址 ”就 可 以 浏览 该 网 站 了 。 

网 站 是 由 一 组 网 页 组 成 的 ,只 有 一 个 网 页 的 网 站 也 是 网 站 ,所 以 通常 对 网 站 、 网 页 的 区 
分 不 是 特别 清楚 。 例 如 人 们 通常 认为 设计 网 站 和 设计 网 页 是 一 回 事 , 但 严格 来 说 还 是 有 区 
分 的 。 网 页 设计 是 针对 一 个 页 面 的 设计 ,而 网 站 设计 是 针对 网 站 整体 内 容 、 风 格 等 方面 的 设 
计 。 网 站 设计 包含 网 页 设计 。 


1.3.2 首页 与 主页 


下 痛 责 
首页 是 网 站 接受 HTTP 请 求 后 默认 打开 的 网 页 。 虽 然 可 以 通过 设置 Web 服务 器 IIS 
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的 文档 属性 指定 首页 文件 名 称 ,但 使 用 Index. htm 或 Index. html 作为 首页 文件 名 是 静态 网 
站 中 的 惯例 ,所 以 在 静态 网 站 制作 中 ,应 该 养 成 使 用 Index. htm 或 Index. html 作为 网 站 首 
页 文件 名 的 习惯 。 

首页 文件 扩展 名 使 用 . htm 或 者 . html 一 般 没有 关系 ,因为 在 Web 服务 器 IIS 的 文档 属 
性 中 可 以 指定 多 个 默认 文档 ,一 般 情 况 下 会 将 它们 都 指定 进去 ,只 不 过 放置 的 前 后 顺序 可 能 
不 同 。 如 果 在 一 个 网 站 中 不 是 Index. htm 和 Index. html 两 个 文件 都 存在 ,那么 是 没有 问题 
的 。 如 果 在 一 个 网 站 中 Index. htm 和 Index. html 文件 都 存在 ,到 底 哪 个 是 默认 启动 的 首页 
文件 , 那 就 要 看 Web 服务 器 IIS 的 文档 属性 的 设置 顺序 了 ,所 以 一 般 要 避免 这 两 个 文件 同 
时 存在 。 有 时 用 户 可 能 不 知道 Web 服务 器 IIS 的 文档 属性 设置 情况 (例如 Internet 网 站 提 
供 的 网 站 空间 ) , 当 网 站 不 能 打开 时 ,可 以 换 一 个 首页 扩展 名 试 试 。 

动态 网 站 中 习惯 使 用 的 首页 文件 名 是 Default. jsp、Default. aspx 等 。 

2. 主页 

网 站 主页 一 般 指 网 站 的 第 一 级 门面 网 页 ,是 一 个 网 站 中 所 有 网 页 的 起 始点 和 交汇 点 。 
在 静态 网 站 中 ,一 般 首页 就 是 主页 ,但 在 一 些 动 态 网 站 中 ,首页 可 能 不 是 主页 。 例 如 一 些 需 
要 身份 验证 才能 进入 的 网 站 ,其 首页 只 是 一 个 用 户 登 录 页 面 ,只 有 通过 身份 验证 的 用 户 才 能 
进入 网 站 主页 。 


1.3.3 静态 网 页 与 动态 网 页 


1. 静态 网 页 与 静态 网 站 

静态 网 页 是 指 网 页 文件 中 只 包含 HTML 标记 和 在 浏览 器 中 可 以 执行 的 JavaScript 脚 
本 的 网 页 文件 。 虽然 静态 网 页 中 的 JavaScript 脚本 可 以 在 网 页 中 产生 一 些 动态 效果 (例如 
弹出 消息 ,飘动 广告 .显示 /隐藏 图 片 等 ), 但 对 于 所 有 用 户 来 说 看 到 的 网 页 内 容 是 一 样 的 ,所 
以 称 作 静 态 网 页 。 静 态 网 页 制作 好 之 后 ,如 果 需 要 改动 网 页 上 的 内 容 , 就 必须 修改 网 页 源 代 
码 , 然 后 重新 传送 到 服务 器 上 。 

静态 网 页 都 是 扩展 名 为 . htm 或 . html 的 文本 文件 。 当 浏览 器 请 求 一 个 静态 网 页 时 , 服 
务 器 会 将 该 文件 直接 发 送 给 浏览 器 ,由 浏览 器 解释 执行 该 网 页 文件 。 

由 静态 网 页 构成 的 网 站 是 静态 网 站 。 静 态 网 站 一 般 不 需要 数据 库 的 支持 。 静 态 网 站 内 
容 的 更 新 需要 直接 修改 网 页 源 代 码 ,所 以 维护 工作 量 较 大 。 

静态 网 站 制作 简单 ,适合 发 布 简 单 信息 的 场合 ,例如 公司 介绍 ,个 人 主页 等 一 般 采用 静 
态 网 站 形式 。 静 态 网 页 制作 技术 也 是 动态 网 页 制作 技术 的 基础 。 

2. 动态 网 页 与 动态 网 站 

动态 网 页 是 指 网 页 中 不 仅 包含 HTML 标记 ,而 且 还 包含 需要 在 服务 器 上 执行 的 程序 
代码 的 网 页 文件 。 动 态 网 页 可 以 处 理 用 户 在 网 页 上 提交 的 表单 信息 ,例如 用 户 注册 信息 等 。 
动态 网 页 一 般 需 要 数据 库 的 支持 。 在 数据 库 的 支持 下 ,不同 的 用 户 ,不 同 的 时 间 可 以 得 到 不 
同 的 信息 。 

动态 网 页 需要 Web 服务 器 技术 ,动态 网 页 的 扩展 名 一 般 有 .asp、.jsp、.aspx 等 。 在 浏 
览 器 申请 动态 网 页 时 ,Web 服务 器 在 服务 器 端 执行 该 网 页 文件 中 的 程序 代码 ,根据 用 户 的 
具体 要 求生 成 一 个 HTML 静态 网 页 文件 发 送 给 浏览 器 。 这 样 在 浏览 器 上 得 到 的 网 页 还 是 
一 个 静态 网 页 ,只 不 过 对 于 同一 网 页 每 次 请 求 得 到 的 网 页 内 容 可 能 是 不 同 的 ,所 以 称 作 动态 
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网 页 。 
包含 动态 网 页 的 网 站 为 动态 网 站 , 像 BBS、 聊 天 室 、 网 络 银行 .网 上 书店 等 都 是 动态 网 
站 。 动 态 网 站 的 制作 技术 比较 复杂 。 动 态 网 页 的 维护 比较 简单 ,在 不 需要 对 网 页 功能 进行 
修改 时 ,一 般 不 需要 改动 网 页 代码 。 动 态 网 站 的 维护 多 是 对 数据 库 中 数据 的 维护 ,例如 删除 
过 期 的 留言 等 。 

本 教材 中 不 涉及 动态 网 页 制作 方面 的 内 容 ,所 以 HTML 标记 中 的 表单 标记 、 
Dreamweaver 中 的 服务 器 技术 部 分 在 本 教材 中 都 不 涉及 ,由 后 续 动态 网 站 制作 课程 解决 。 


1.4 网 页 制作 语言 与 工具 


1.4.1 网 页 制作 语言 


1. HTML 

HTML(Hyper Text Markup Language, 超 文本 置 标语 言 ) 是 网 页 制作 的 基本 核心 语 
言 。 准 确 地 说 ,HTML 是 一 种 规范 和 标准 。HTML 通过 标记 网 页 中 的 各 个 组 成 部 分 指示 
浏览 器 如 何 显示 网 页 内 容 , 就 像 Word 中 标记 文字 的 大 小 、 对 齐 方式 一 样 使 网 页 中 的 文本 按 
照 标 记 规定 的 格式 、 样 式 显示 。 

将 一 个 包含 HTML 标记 和 文本 内 容 ,按照 HTML 文档 结构 组 成 的 文本 文件 保存 成 扩 
展 名 是 . html 或 . htm 的 文件 ,那么 这 个 文件 就 是 一 个 可 以 在 浏览 器 上 浏览 的 网 页 。 例 如 ， 
将 下 面 的 这 段 代 码 保存 成 Index. htm 文件 : 


<html> 
<head> 
<<title> 我 的 网 页 <</title> 
</head> 
<body> 
网 页 制作 简单 易学 
</body> 
</html> 


保存 文件 后 ,在 Windows 资源 管理 器 中 双击 文件 名 就 可 以 打开 这 个 文件 。 该 文件 在 浏 
览 器 中 的 显示 如 图 1-4 所 示 。 
E01 | 全 
OR OE 莉 2 后 天 


地 EW 同 Tume ra。 | 固 Ml 这 


网 页 制作 简单 易学 


1-4 Index. htm 文件 在 浏览 器 中 的 显示 


第 1 章 网 站 项 目 及 网 站 概念 [7 (XY 


这 段 代码 就 是 一 个 最 简单 的 HTML 网 页 文件 。HTML 文件 的 基本 结构 包括 以 下 3 
部 分 。 

(1) 二 html>> … 过 /html>: 表示 HTML 文档 的 开始 和 结束 。 

(2) 二 head> … 反 /head>: HTML 文档 的 头 部 。 头 部 中 最 常用 的 标记 是 过 title 二 标 
记 。<title 之 标记 中 的 内 容 是 显示 在 浏览 器 上 的 窗口 标题 ,例如 在 图 1-4 中 显示 的 窗口 标 
题 “我 的 网 页 ” 

(3) 过 body 字 … 去 /body>: 二 body 记 标记 之 间 的 内 容 是 在 浏览 器 窗口 中 显示 的 
内 容 。 

如 果 需 要 在 浏览 器 窗口 中 显示 的 内 容 更 丰富 、 版 面 更 活跃 .色彩 更 鲜艳 ,就 需要 使 用 更 
多 的 HTML 标记 和 标记 属性 。 

2. 样式 表 CSS 

CSS 是 对 HTML 功能 的 补充 。 使 用 CSS 可 以 实现 网 页 元 素 的 格式 化 和 精确 定位 ,还 
可 以 实现 一 些 其 他 的 效果 。 在 制作 网 页 时 使 用 CSS, 能 够 实现 网 页 内 容 与 网 页 格式 处 理工 
作 的 分 离 ,减少 工作 量 。 下 面 是 一 个 使 用 了 CSS 的 网 页 。 

<html> 

<head> 

<title> 我 的 网 页 一 /title> 

</head> 

<body> 

<p align= "center"><font face 一 "隶书 ”color 一 "# FF0000" 盖 

二 span style 一 "fontrsize:3cm" 二 我 的 网 页 一 /span 之 一 /font> 


</body> 
</html> 


该 网 页 文件 在 浏览 器 中 打开 时 显示 结果 如 图 1-5 所 示 。 


Nicrosoft Internet Erplorer 
文件 四 编 加 四 ”查看 如 收藏 ) 工具 CD 帮助 0 下 了 
名 所- 则 :四 辐 的 | 人 P 扫 雪 这 收 R 天 二 措 休 如 | 全 -名 网- 

地 址 加 | 区 ] J:\jc\exanple\exanl-2 htn SDE 


我 的 网 页 
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1-5 使 用 CSS 样式 


在 HTML 中 可 以 指定 的 最 大 字体 为 36 磅 (size 一 "7") ,在 CSS 中 使 用 style 一 "font- 
size:3cm" ,使 文字 大 小 显示 为 3cm。 

3. JavaScript 

JavaScript 是 Netscape 公司 为 了 扩展 Netscape Navigator 浏览 器 功能 开发 的 可 以 嵌入 
到 HTML 文档 中 的 脚本 语言 。 使 用 JavaScript 可 以 使 网 页 增加 许多 动态 效果 。 由 于 
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JavaScript 是 在 浏览 器 上 执行 的 程序 代码 ,所 以 网 页 的 动态 效果 与 Web 服务 器 无 关 。 
JavaScript 在 增加 网 页 的 动态 功能 时 ,不 会 增加 Web 服务 器 的 负担 和 线路 通信 流量 。 

JavaScript 在 网 页 中 的 杰出 表现 备 受 广大 网 页 制作 爱好 者 的 青睐 ,所 以 在 Microsoft 
Internet Explorer 中 也 支持 JavaScript 脚本 。 

本 教材 中 不 涉及 JavaScript 脚本 编程 。Dreamweaver 中 的 行为 .Fireworks 中 导出 的 按 
钮 .切片 行为 都 可 以 在 网 页 中 生成 JavaScript 脚本 。 有 关 JavaScript 脚本 编程 的 内 容 , 读 者 
可 参阅 其 他 相关 教材 ,本 书 中 对 出 现 的 JavaScript 脚本 不 做 详细 解释 。 

4. DHTML 

DHTML(Dynamic HTML ,动态 HTML) 不 是 一 种 具体 的 技术 ,是 利用 文档 对 象 模 型 
DOM(Document Object Model) ,样式 表 CSS 和 JavaScript 技术 ,在 HTML 基础 上 实现 网 
页 内 容 的 动态 样式 ,动态 内 容 和 动态 定位 。DHTML 一 般 称 作 客户 端 动态 网 页 技术 。 

DHTML 技术 与 Web 服务 器 无 关 , 只 是 在 浏览 器 上 实现 一 些 动态 效果 ,而 一 般 的 动态 
网 页 则 需要 Web 服务 器 的 支持 。 

DHTML 中 的 DOM 也 是 一 种 规范 。DOM 将 网 页 上 的 所 有 元 素 都 划分 成 独立 的 对 象 ， 
从 而 可 以 实现 对 这 些 元 素 的 单独 编程 处 理 ,实现 动态 效果 。DOM 为 HTML 标记 设置 了 一 
系列 属性 ,通过 设置 标记 的 属性 可 以 设置 网 页 元 素 的 显示 效果 。 这 些 内 容 在 后 面 的 HTML 
标记 内 容 部 分 将 会 看 到 。 

下 面 是 一 个 简单 的 DHTML 动态 效果 网 页 。 

<html> 

到 head 之 一 title> 我 的 网 页 一 /title 之 一 /head> 

<body> 

<span id 一 "e3" style= "font-size:2cm" onmouseover ="e3. style. color= 'red';" onmouseout =" 

e3. style. color 二 'black';" 志 我 的 网 页 过 /span 二 


</body> 
</html> 


该 网 页 在 浏览 器 中 打开 显示 结果 如 图 1-6 所 示 。 

文件 四 编辑 也) 查看 W) 收藏 凡 。 工具) 帮助 0 | 二 
四 恨 -加 -日 四 欢 | 万 失去 类 天 好 办 休 包 | 间 - 加” 
地 址 四 ) | 臣 ] T:\jevexsnplevexanl-3.htm 了 | SE 


EE 


ELE 


图 1-6 DHTML 动态 效果 网 页 


在 图 1-6 网 页 显示 窗口 中 , 当 和 鼠标 移 到 文字 上 面 时 ,文字 颜色 将 变 成 红色 , 当 和 鼠标 移 开 
后 ,文字 颜色 又 恢复 黑色 。 
因为 DHTML 涉及 JavaScript 内 容 , 所 以 关于 DHTML 的 内 容 可 参考 其 他 书籍 。 


第 1 章 网 站 项 目 及 网 站 概念 91 |) 


1.4.2 网 页 制作 工具 


1. 网 页 文本 编辑 工具 

网 页 文件 是 包含 HTML 标记 和 文本 信息 的 文本 文件 ,所 以 所 有 能 够 生成 文本 文件 的 
工具 都 可 以 作为 网 页 编辑 工具 。 在 Windows 系统 中 ,最 简单 的 网 页 编辑 工具 是 “记事 本 ”和 
“写字 板 ”。 在 记事 本 中 输入 网 页 文档 内 容 , 保 存 成 扩展 名 是 . htm 或 . html 的 文件 就 可 以 
了 。 如 果 使 用 Word, 在 保存 HTML 文档 时 必须 把 保存 文件 类 型 选择 成 纯 文本 ,扩展 名 修 
改 成 . htm 或 . html。 

2. 可 视 化 网 页 编辑 工具 

使 用 网 页 文本 编辑 工具 制作 网 页 ,需要 记 住 很 多 HTML 标记 和 标记 属性 。 如 果 在 网 
页 中 使 用 DHTML、CSS 和 JavaScript 脚本 ,所 有 代码 都 需要 手工 录入 。 手 工 录入 代码 容易 
出 错 ,而 且 页 面 效 果 不 直 观 。 

为 了 直观 地 进行 网 页 设计 ,市 场 上 出 现 了 很 多 可 视 化 网 页 编辑 工具 。 使 用 这 些 工具 制 
作 网 页 时 ,在 工具 窗口 中 做 成 的 样子 就 是 将 来 在 浏览 器 中 显示 的 样子 。 这 些 工具 可 以 根据 
窗口 中 的 内 容 自 动 生 成 HTML 标记 及 标记 属性 。 这 些 工具 的 另 一 种 功能 就 是 可 以 帮助 生 
成 JavaScript 脚本 或 CSS 代码 ,从 而 使 制作 网 页 工作 更 加 容易 ,减轻 工作 强度 。 

并 不 是 说 有 了 可 视 化 网 页 编辑 工具 就 不 必要 学 习 HTML 标记 了 。 对 于 制作 网 页 的 专 
业 人 员 来 说 ,HTML 是 基本 功 , 是 核心 技术 。 一 些 可 视 化 网 页 编辑 工具 在 制作 网 页 时 ,可 能 
存在 着 没有 完全 包含 所 有 HTML 属性 的 情况 ,也 有 无 法 实现 作者 意图 的 情况 ,这 时 只 能 靠 
修改 源 代码 中 的 HTML 标记 解决 问题 。 在 有 些 时 候 使 用 可 视 化 网 页 编辑 工具 很 难 实现 的 
功能 ,打开 源 代码 文件 ,简单 地 修改 一 下 HTML 标记 就 能 实现 。 能 否 熟练 使 用 HTML 标 
记 , 也 是 衡量 网 页 制作 专业 水 平 高 低 的 一 个 标准 。 

市 场 上 有 很 多 可 视 化 网 页 编辑 工具 。 最 常见 、 最 简单 的 可 视 化 网 页 编辑 工具 应 该 是 
Office 软件 中 的 FrontPage。 该 工具 操作 简单 ,并 且 还 提供 多 个 网 页 模板 。 在 模板 中 填写 相 
应 的 内 容 就 能 做 成 一 个 网 站 。 

Macromedia Dreamweaver 是 一 款 比较 专业 的 网 页 制作 工具 ,可 以 提供 较 多 的 
JavaScript 脚本 行为 和 CSS 的 代码 生成 功能 。 它 和 Fireworks、Flash 工具 合 称 网 页 制作 三 
剑客 ,号 称 制作 网 页 的 最 佳 梦幻 组 合 。 

3. 网 页 图 像 处 理工 具 和 网 页 动画 制作 工具 

Web 页 是 包含 文本 、 图 画 .音像 的 多 媒体 文档 。 网 页 中 的 图 像 编 辑 ,动画 制作 工具 在 市 
场 上 也 有 很 多 种 ,例如 著名 的 PhotoShop 就 是 一 款 杰出 的 图 像 编 辑 工具 。Fireworks 和 
Flash 也 是 常用 的 网 页 图 像 编 辑 工具 和 网 页 动画 制作 工具 ,它们 不 仅 可 以 完成 网 页 图 像 编 
辑 和 网 页 动画 制作 ,而且 还 能 直接 导出 为 . html 网 页 文件 ,也 能 和 Dreamweaver 工具 较 好 地 


配合 。 
1.5 网 站 开发 流程 


网 站 的 开发 也 是 一 项 工程 ,也 需要 遵循 科学 的 项 目 开发 过 程 。 一 般 网 站 的 开发 过 程 需 
要 下 面 几 个 步骤 。 
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1.5.1 网 站 设计 


像 一 般 的 工程 项 目 一 样 ,在 动手 制作 网 站 之 前 需要 先进 行 网 站 的 设计 ,尤其 是 在 较 大 的 
网 站 工程 中 ,前 期 的 设计 工作 就 更 加 重要 。 如 果 不 进行 设计 就 着 手 制作 , 那 就 像 盖 楼 房 没 有 
设计 图 纸 一 样 , 可 能 需要 反复 返工 ,浪费 时 间 和 精力 。 即 便 是 一 个 简单 的 个 人 网 站 ,前 期 的 
设计 也 会 起 到 事半功倍 的 效果 。 

一 个 良好 的 网 站 设计 方案 可 能 需要 更 专业 的 网 页 设计 师 来 完成 。 因 为 网 站 的 设计 不 仅 
涉及 网 站 的 内 容 , 还 涉及 美学 效果 方面 的 知识 和 经 验 。 对 于 初学 者 来 说 ,网 站 设计 只 有 好 、 
差 之 分 ,没有 对 、 错 之 别 。 设 计 效果 的 好 与 差 也 取决 于 个 人 的 好 恶 。 经 验 是 积累 的 ,要 成 为 
一 个 优秀 的 网 页 设计 师 需 要 自己 的 勤奋 实践 。 

网 站 设计 一 般 包括 以 下 几 方 面 内 容 。 

1. 网 站 内 容 设计 

网 站 内 容 设计 包括 网 站 的 主题 设计 、 网 站 的 内 容 组 织 、 网 站 栏目 等 。 一 个 网 站 中 的 
所 有 内 容 都 是 围绕 一 个 主题 组 织 的 。 一 个 网 站 中 不 能 有 多 个 主题 ,也 不 能 有 主题 之 外 的 
内 容 。 

网 站 的 主题 是 什么 ; 网 站 中 包括 哪些 栏目 ; 哪些 内 容 放置 在 哪个 网 页 中 ; 网 页 之 间 的 
关系 如 何 ; 如 何 转 到 下 级 页 面 和 返回 上 级 页 面 ; 网 站 是 否 需要 起 一 个 名 称 , 网 站 名 称 叫 什 
么 ,是 否 使 用 网 站 标志 等 都 是 网 站 内 容 设 计 的 任务 。 

在 静态 网 站 内 容 设计 工作 中 ,因为 不 涉及 数据 库 的 使 用 和 Web 服务 器 技术 ,所 以 该 部 
分 设计 任务 比较 简单 。 

2. 网 页 版 面 布局 设计 

网 页 版 面 布局 设计 就 是 确定 在 一 个 网 页 上 放置 哪些 内 容 , 什 么 内 容 放置 在 什么 位 置 。 
所 有 的 网 页 都 有 版 面 布局 设计 的 问题 ,特别 是 在 首页 设计 中 更 为 重要 ,因为 首页 可 能 会 包含 
一 些 其 他 网 页 所 没有 的 内 容 。 

一 般 的 网 站 首页 可 能 包含 以 下 几 方 面 内 容 。 

(1) Logo: 网 站 标志 。 一 般 公司 .单位 网 站 上 都 会 设计 网 站 标志 。 

(2) Banner: 横幅 标题 。 用 于 显示 网 站 名 称 等 。 

(3) 导航 栏 . 导航 按钮 : 用 于 链接 到 其 他 网 页 的 超 链接 标记 或 按钮 等 。 

(4) 文本 : 网 页 上 的 文字 信息 。 

(5) 图 像 : 用 于 信息 展示 或 美化 网 页 的 图 片 。 

(6) 动画 : 用 于 信息 展示 或 装饰 网 页 ,产生 动态 页 面 效果 的 GIF、Flash 动画 。 

(7) 版 权 和 联系 信息 : 网 页 制作 者 的 版 权 信息 和 电子 邮件 链接 。 

如 何 将 众多 的 内 容 生动 并 协调 地 组 织 在 一 个 网 页 中 , 且 能 够 达到 一 个 良好 的 版 面 效果 ， 
这 是 一 门 较 深 的 学 问 。 

3. 网 页 色彩 效果 设计 

网 页 的 色彩 效果 设计 就 是 网 页 上 的 颜色 运用 和 搭配 。 网 页 色彩 效果 设计 需要 美学 方面 
的 知识 。 一 个 网 站 应 该 有 一 个 主 色调 。 网 站 的 色调 不 仅 涉及 美学 知识 个 人 爱好 ,还 与 网 站 
的 具体 内 容 有 关 。 

下 面 是 一 组 常见 的 颜色 所 代表 内 容 的 信息 。 
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(1) 红 : 代表 热情 、 奔 放 、 喜 悦 、 庆 典 、 幸 福 。 

(2) 黑 : 代表 严肃 ,沉着 、 刚 健 。 

(3) 黄 : 代表 高 贵 . 富 有、 明朗 。 

(4) 白 : 代表 纯洁 ,简单 ,神圣 ,明快 。 

(5) 蓝 : 代表 智慧 ,清末 .诚实 深远 。 

(6) 绿 : 代表 生机 、 生 命 . 和 平 青春。 

(7) 灰 : 代表 深沉 、 消 极 .沉默 .忧郁 。 

(8) 紫 : 代表 神秘 ,浪漫 魅力 ,优雅 。 

(9) 棕 : 代表 朴实 ,土地 。 

无 论 采 用 什么 色调 ,网 站 的 各 个 网 页 色调 需要 保持 一 致 。 一 个 网 页 上 色彩 的 数量 不 能 
太 多 ,文字 信息 和 背景 色 的 对 比 度 要 强 。 不 能 只 强调 网 页 色彩 而 忽略 网 页 信息 的 可 读 性 。 

网 页 中 与 主 色调 的 搭配 颜色 是 初学 者 最 难 把 握 的 问题 ,初学 者 不 妨 借助 Internet 上 的 
色彩 搭配 软件 ,如 ColorSchemer, 选 取 与 主 色 调 的 搭配 颜色 。 

4. 网 页 设计 草图 

对 每 个 网 页 的 设计 方案 可 以 绘制 成 设计 草图 供 制 作 网 页 时 参考 。 网 页 设计 草图 可 以 使 
用 Photoshop、Fireworks、Windows 中 的 画板 等 绘图 软件 制作 ,也 可 以 手工 绘制 ,然后 用 数 
码 相 机 或 扫描 仪 输入 到 计算 机 中 。 有 了 网 页 设计 草图 后 ,在 使 用 Dreamweaver 制作 网 页 
时 ,就 可 以 载 人 “跟踪 图 像 " 将 草图 放置 在 窗口 内 ,如 同 将 草图 附 在 透明 纸 下 面 就 可 以 根据 设 
计 草 图 进行 网 页 的 制作 。 设 计 草图 只 是 在 制作 网 页 时 作为 底 图 使 用 ,网 页 保存 之 后 在 浏览 
器 上 打开 时 ,设计 草图 是 不 显示 的 。 


1.5.2 制作 网 站 


有 了 网 站 设计 方案 后 ,制作 网 站 就 是 按照 设计 方案 去 制作 一 个 个 网 页 。 一 些 公 司 招聘 
的 网 页 编辑 工程 师 就 是 专门 做 这 些 工作 的 。 

制作 网 页 需要 按照 设计 方案 将 规定 的 内 容 放置 在 指定 的 网 页 位 置 ,完成 所 有 超 链接 的 
设置 ,按照 设计 方案 完成 文字 效果 、 色 彩 效果 的 设置 ,完成 网 页 中 一 些 素材 的 制作 。 在 学 生 
学 习 阶段 ,制作 网 页 时 可 能 会 到 Internet 中 去 下 载 一 些 网 页 素材 ,但 对 于 一 个 企业 网 站 , 绝 
大 部 分 素材 需要 自己 制作 ,如 反映 企业 形象 .风貌 的 图 片 作品 、 企 业 Logo, 产 品 图 片 等 都 需 
要 制作 者 自己 制作 。 制 作 和 编辑 这 些 素材 时 ,就 需要 使 用 网 页 图 像 编 辑 工 具 。 一 般 网 页 中 
少不了 动画 作品 ,它们 就 需要 使 用 动画 制作 工具 来 完成 。 

制作 网 页 需要 使 用 一 些 图 片 . 动 画素 材 , 需 要 生成 一 些 文件 ,哪些 文件 存放 在 哪里 事先 
也 需要 规划 一 下 。 一 般 来 说 首先 需要 建立 一 个 本 地 站 点 。 建 立 本 地 站 点 的 重要 性 在 以 后 章 
节 中 会 有 叙述 。 本 地 站 点 就 是 在 本 地 计算 机 上 建立 一 个 文件 夹 ,所 有 与 网 站 有 关 的 文件 都 
要 存放 在 该 文件 夹 中 。 在 站 点 文件 夹 中 是 否 分 栏目 设置 子 目 录 , 图 片 等 素材 放 到 哪个 文件 
夹 中 ,各 个 网 页 文件 的 名 称 如 何 确定 等 ,在 动手 制作 之 前 最 好 做 好 规划 ,以 免 网 页 文件 之 间 
发 生 名 称 冲突 或 产生 混乱 。 

无 论 是 生成 的 素材 文件 ,还 是 制作 生成 的 网 页 文件 ,文件 名 中 都 要 避免 使 用 汉字 。 使 
汉字 文件 名 往往 会 产生 链接 错误 。 
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1.5.3 发布 网 站 


制作 网 站 可 以 在 任何 一 台 安 装 有 网 页 制作 工具 软件 的 计算 机 上 完成 。 网 站 制作 完成 后 
需要 经 过 严格 测试 ,测试 无 误 后 就 可 以 进行 网 站 的 发 布 工作 了 。 发 布 网 站 就 是 将 网 站 中 的 
所 有 网 页 文件 .图片 .动画 素材 存放 到 Web 服务 器 上 的 指定 目录 中 。 未 经 发 布 的 网 站 不 是 
真正 意义 上 的 Web 网 站 。 

发 布 网 站 的 方法 与 Web 网 站 在 Internet 中 的 类 型 有 关 , 简 单 地 说 可 以 分 为 两 种 类 型 : 
自主 网 站 和 寄宿 网 站 。 

自主 网 站 就 是 自己 有 Web 服务 器 ,域名 ,并 且 该 服务 器 是 通过 专线 连接 到 Internet 网 
络 上 的 。 在 自主 网 站 上 发 布 网 站 时 ,可 以 采取 FTP 传输 方法 ,或 者 直接 将 网 站 文档 复制 到 
服务 器 上 的 指定 目录 中 即 可 。 

寄宿 网 站 就 是 将 网 站 放置 到 Internet 网 络 中 别人 的 Web 服务 器 上 。 在 Internet 中 有 
许多 网 站 提供 这 种 服务 ,有 收费 的 和 免费 的 。 收 费 的 寄宿 网 站 空间 大 ,速度 快 ; 免费 的 空间 
小 ,广告 多 。 

在 Dreamweaver 中 通过 设置 远 地 站 点 的 FTP 地 址 、Web 服务 器 上 的 文件 夹 .用 户 名 、 
密码 ,就 可 以 通过 FTP 方式 将 网 站 发 布 到 远 地 站 点 上 。 通 常人 们 更 习惯 使 用 FTP 工具 软 
件 来 发 布 网 站 ,因为 使 用 这 些 工 具 更 直观 、 更 方便 。 下 面 是 一 款 FTP 工具 软件 CuteFTP 
(该 软件 在 Internet 上 很 容易 找到 ) 。 

将 该 软件 安装 在 本 地 计算 机 上 ,启动 该 软件 后 的 界面 如 图 1-7 所 示 。 

站 点 管理 器 远 地 窗 口 


ea 没有 连接 - GlobalSCAPE Texas，IP- CuteFTP 5.0 
文件 时 ) | 编辑 于】 查看 如 书签 @) 命令 CC) 传输 加 窗口 叫 必 助 中 


0 2005-9-18 14:06 
0 2006-2-23 21:35 


| Ww [M070B | 
本 地 窗口 


1-7 CuteFTP 窗口 


单 击 * 站 点 管理 器 图标, 打开 * 站 点 管理 器 ?面板 。 单 击 面板 中 的 “新 建 ?按钮 ,面板 显示 
如 图 1-8 所 示 。 

在 图 1-8 中 ,站 点 标签 中 填 人 站 点 名 称 ( 可 省 略 ) ,在 下 面相 应 栏 中 填 入 FTP 主机 地 址 、 
用 户 名 和 密码 ,登录 类 型 选择 “普通 ”, 单 击 “ 连 接 ” 按 钮 .就 可 以 连接 到 远 地 的 FTP 站 点 。 下 
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文件 中 编 如 FE) 安全 @) 
日 回 General FIP Sites 站 点 标签 LL); 
i Anonymous FTP Sites | 
CuteFTP Download Site 站 
FP 主机 地 址 0 
了 站 点 用 户 名 称 四 
TI 站 点 密码 四 
TTP 站 点 连接 注 口 CD) 
也 
必 好 类 型 一 一 一 一 一 一 
个 首 Q | 
匿名 四) 
个 两 者 
冲 建 中， | 向导 思 ，. | 导入 四 .| 编 六 四 .| 下 助 | [ 注 扫 中 ] 退出 | 
| | 翅 


图 1-8 新 建 FTP 站 点 


次 再 使 用 时 ,在 “站 点 管理 器 ”面板 中 选择 建立 的 站 点 名 称 , 直 接 单 击 “连接 ?按钮 就 可 以 了 。 
完成 了 和 远 地 FTP 站 点 的 连接 之 后 ,在 图 1-7 的 远 地 窗 口中 将 显示 出 远 地 FTP 站 点 的 目 
录 结 构 。 这 时 可 以 在 远 地 窗口 中 改变 所 处 的 目录 位 置 ,删除 目录 中 文件 。 上 传 文件 操作 只 
需要 将 本 地 窗口 中 的 文件 用 鼠标 拖 到 远 地 人 窗口 即 可 ; 同样 ,将 远 地 窗 口中 的 文件 拖 到 本 地 
窗口 就 能 实现 文件 的 下 载 。 至 于 上 传 、 下 载 到 哪个 目录 中 ,需要 进行 选择 。 


1.5.4 把 网 站 加 入 到 搜索 引擎 中 


建设 网 站 的 目的 是 为 了 他 人 能 够 浏览 网 站 的 内 容 。 除 了 内 部 办 公 网 站 之 外 ,网 站 都 希 
望 更 多 的 人 来 浏览 。 如 何 向 外 宣传 网 站 ,除了 通知 他 人 网 站 域名 、 地 址 ,在 其 他 网 站 建立 友 
情 链接 之 外 ,最 有 效 的 方法 就 是 将 网 站 加 入 到 搜索 引擎 中 ,使 所 有 人 都 能 找到 该 网 站 。 

所 有 搜索 引擎 网 站 都 允许 用 户 把 网 站 注册 到 它们 的 站 点 数据 库 中 。 虽 然 一 般 搜索 引擎 
会 自动 搜索 网 站 ,但 主动 加 入 更 有 效 。 网 站 加 入 搜索 引擎 的 操作 使 用 网 站 提供 的 “网 站 登 
录 ” 之 类 的 页 面 。 例 如 ,在 百度 网 站 可 以 如 下 操作 : 选择 “帮助 "1“ 网 页 收录 问题 "命令 ,打开 
网 站 登录 网 页 ,如 图 1-9 所 示 。 

在 网 页 中 输入 网 站 域名 以 及 验证 码 , 单 击 “ 提 交 网 站 ”按钮 就 完成 了 网 站 注册 。 网 站 提 
交 之 后 一 般 需要 4 周 左右 被 处 理 ,能 否 被 搜索 引擎 收录 ,还 要 看 提交 网 站 内 容 是 否 受 欢迎 ， 
是 否 会 给 搜索 引擎 网 站 带 来 负面 影响 。 

对 于 被 搜索 引擎 收录 的 网 站 ,所 有 链接 正确 的 网 页 正文 内 容 都 会 被 搜索 。 网 站 名 称 、 网 
页 主要 内 容 应 该 放置 到 网 页 头 部 的 一 title 之 标记 内 作为 页 面 窗口 标题 。 网 页 窗口 标题 的 内 
容 会 被 搜索 引擎 作为 搜索 内 容 标 题 列 出 。 


1.5.5 网 站 维护 


一 个 运行 中 的 网 站 总 需要 进行 维护 ,特别 是 静态 网 站 更 需要 经 常 维护 。 网 站 的 维护 有 
功能 维护 ,效果 维护 和 信息 维护 几 个 方面 。 
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文件 口 编辑 E) 查看 (收藏 和 工具 CD 帮助 辐 
加 后 E 7 目 7 国 固 多 | 亿 扫 索 癌 收 戈 类 如 |D" 总 可 "DD 总 
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搜索 帮助 百度 推广 ”网 站 登录 百度 首页 
网 站 登录 


， 一 个 免费 登录 网 站 只 需 提 交 一 页 (首页 ) ， 百 度 搜索 引擎 会 自动 收录 网 页 。 
， 符合 相关 标准 您 提交 的 网 址 ， 会 在 1 个 月 内 按 百度 搜索 引擎 收录 标准 被 处 理 。 
， 百度 不 保证 一 定 能 收录 您 提交 的 网 站 


( 例 : http://wwy, baidu. con) 
[http:// 
请 输入 验证 码 。 |KWYR 提交 网 站 | 


图 1-9 百度 网 站 登录 


功能 维护 是 修改 或 增加 网 站 的 功能 、 网 页 等 ; 效果 维护 是 为 了 更 新 网 站 的 形象 ,避免 总 
是 一 个 面孔 ; 信息 维护 在 静态 网 站 中 尤其 频繁 , 像 新 闻 网 站 中 ,每 天 需要 更 新 网 站 内 容 , 而 
在 静态 网 站 中 ,更 新 内 容 就 意味 着 重新 制作 或 修改 网 页 。 

网 页 修改 后 ,经 过 测试 ,上 传 到 网 站 上 ,替换 掉 原来 的 网 页 ,网 站 内 容 就 被 更 新 了 。 在 这 
种 情况 下 ,一 般 是 上 传 修改 过 的 网 页 文件 ,不 必 上 传 整个 网 站 。 


1.6 小 结 


本 童 主要 介绍 了 静态 网 站 制作 实 训 项 目的 总 体 结构 与 首页 设计 ,另外 介绍 了 网 站 是 如 
何 工作 的 什么 是 网 站 ,什么 是 网 页 ,它们 之 间 是 什么 关系 ,介绍 了 静态 网 站 和 动态 网 站 的 概 
念 ,介绍 了 网 页 制作 中 的 一 些 必 备 知识 ,例如 默认 的 首页 文件 名 、HTML 标记 的 概念 、 
HTML 文档 基本 结构 、 常 见 的 网 页 制作 语言 与 网 页 编辑 工具 ,以 及 网 站 的 一 般 开发 流程 。 

通过 本 章 的 学 习 , 读 者 应 该 了 解 本 课程 要 做 什么 ,如 何 做 ,应 该 着 重 掌握 基本 HTML 
文档 的 编辑 生成 方法 ,了 解 网 站 的 设计 开发 流程 ,掌握 使 用 FTP 工具 在 Internet 上 发 布 网 
站 的 方法 ,以 及 将 网 站 加 入 到 搜索 引擎 的 过 程 。 


| Wy | 题 


. 简 述 在 Internet 中 访问 Web 网 站 的 过 程 。 
. 网 站 和 网 页 有 什么 联系 和 区 别 ? 

. 网 站 首页 和 主页 有 什么 联系 和 区 别 ? 

. 常用 的 静态 网 站 首页 文件 名 是 什么 ? 

. 什么 是 静态 网 站 ? 


cn 省 
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6. HTML 文档 一 般 结构 是 怎样 的 ? 

7. 什么 是 DHTML? DHTML 和 动态 网 页 有 什么 区 别 ? 
8. 网 站 设计 一 般 包 括 哪 些 内 容 ? 

9. 如 何 把 网 站 发 布 到 Internet 上 ? 

10. 如 何 把 网 站 加 入 到 Internet 搜索 引擎 中 ? 


1.8 实 训 : 网 站 首页 文件 的 编辑 与 发 布 


1. 实 训 目 的 

练习 使 用 “记事 本 ”编辑 网 页 文档 ,使 用 FTP 工具 发 布 上 传 文件 到 Web 服务 器 网 站 目录 。 

2. 实 训 任务 : 网 页 文件 编辑 与 网 站 发 布 

使 用 Windows“ 记 事 本 "编辑 “静态 网 站 制作 实 训 网 站 ”首页 文件 Index. html 页 面 ,将 页 
面 中 的 班级 .姓名 ,学 号 蔡 换 为 自己 的 班级 .姓名 ,学 号 。 

使 用 FTP 工具 将 网 站 首页 文件 Index. html 以 及 相关 文件 上 传 到 自己 的 Web 服务 器 
网 站 目录 中 。 

3. 实 训 指导 

(1) 在 硬盘 或 U 盘 上 创建 一 个 本 地 站 点 文件 夹 (如 Myweb) ,从 本 书 教学 资源 网 站 中 或 
http://www. tingdaily. com/flash/download 网 站 中 下 载 Index. html 文件 和 images、 
flashes、buttons 文件 夹 到 本 地 站 点 文件 夹 中 ( 注 ; 在 以 后 的 叙述 中 ,都 以 读者 已 经 将 
images,flashes、buttons 文件 夹 下 载 到 本 地 站 点 为 基础 )。 

(2) 使 用 Windows 的 “记事 本 ”打开 本 地 站 点 文件 夹 中 的 Index. html 文件 。 在 Index. 
html 文件 中 找到 如 下 内 容 : 

石家庄 邮电 职业 技术 学 院 二 br 

班级 : 计 1236 班 br 二 

姓名 : 孙 小 丫 过 br 二 

学 号 : 31202003605 

使 用 自己 的 学 院 名 称 、 班 级 姓名、 学 号 将 相应 内 容 替 换 掉 ( 注 意 不 要 修改 其 他 内 容 ) , 保 
存 文件 到 本 地 站 点 文件 夹 中 , 单 击 修改 后 的 Index. html 文件 ,检查 显示 内 容 是 否 正 确 。 

(3) 从 Internet 上 下 载 CuteFTP 工具 安装 到 本 地 计算 机 上 。 

(4) 启动 CuteFTP, 将 Web 站 点 加 入 到 CuteFTP 站 点 中 (包括 他 地 址 、 用 户 名 \ 密 码 )。 

(5) 使 用 CuteFTP 工具 将 本 地 站 点 文件 夹 中 的 Index. html 文件 及 images、flashes 和 
buttons 文件 夹 上 传 到 Web 服务 器 的 站 点 根 目录 下 。 

(6) 在 浏览 器 地 址 栏 中 输入 : 


http:// 网 站 域名 /学 号 


浏览 自己 发 布 的 网 站 ,检查 显示 是 否 正确 。 
(7) 保存 本 地 站 点 备用 。 
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2.1 “HTML 标记 ”栏目 设计 
本 章 介绍 如 何 使 用 HTML 标记 制作 网 页 。 本 章 完成 的 内 容 是 教学 项 目 网 站 中 的 
“HTML 标记 ”栏目 制作 ,该 栏目 设计 如 下 。 
2.1.1 页 面 内 容 与 效果 设计 
该 栏目 设计 为 以 “我 的 大 学 ”为 主题 的 网 站 。 栏 目 首页 内 容 与 效果 设计 如 图 2-1 所 示 。 


a 
喇 
攻 


二 0 此 

最 大 的 贡献 ， 学 中 要 认识 到 自己 对 国家 、 对 家 庭 、 对 自己 

学 院 简介 多 到， 和 Le 我 旭 用 我 喜欢 的 一 首 请 和 同 。 融 赤 网 站 制作 

校园 风光 扼要 组 装 维 护 
登 久 党 楼 0 省 言 程 认 i914 

返回 首页 (生计 程序 设计 


自 日 依 山 尽 ， 呐 河 入 海流 。 数据 库 技术 
证 穷 千里 目 ， 更 上 一 层 权 . 


加 作者 ，( 王 之 浇 )， 字 手 陵 ， 唐 代 痢 阳 人 ， 
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2-1 “HTML 标记 ”栏目 首页 设计 


“HTML 标记 ”栏目 首页 设计 为 框架 结构 , 顶部 框架 为 栏目 标题 , 左 侧 框架 为 栏目 导航 
栏 , 右 侧 框架 为 滚动 超 链接 ,中 间 主 框架 显示 各 个 链接 的 网 页 ,底部 框架 为 版 权 信息 和 电子 
邮件 超 链接 。 栏 目 首页 中 间 主 框架 显示 的 初始 内 容 为 “我 的 自白 ” 超 链接 页 面 的 内 容 。 

导航 栏 中 “ 石 邮 校 训 ” 超 链接 页 面 设计 效果 如 图 2-2 所 示 。 当 鼠标 指向 图 片 时 显示 “ 石 
家 庄 邮 电 职 业 技 术 学 院 校训 ”文字 提示 。 

图 2-3 是 “学 院 简介 ”页 面 设计 效果 ,图 2-4 是 “校园 风光 ”页 面 设计 效果 。 

在 滚动 超 链接 网 页 中 包含 鼠标 其 停 技 术 , 当 鼠标 停 在 滚动 超 链接 上 时 , 超 链接 停止 深 
动 ,鼠标 离开 后 超 链接 内 容 继续 滚动 。 
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图 2-2 “ 石 邮 校训 ?页面 设计 


石家庄 邮电 职业 技术 
我 的 自白 学 院 原 为 石家庄 邮政 高 等 
专科 学 校 ， 始 建 于 1956 页 态 网 站 制作 
五 邮 校 训 。 年 ， 为 全 医 邮电 行业 知名 
相 在 过 五 和 的 办 学 批 机 组 装 准 护 
这 院 而 历程 中 ， 学 院 始终 坚 RS 
“服务 邮电 、 贡 献 社会 ” "后 言 程序 设计 
校园 风光 的 宗旨 和 “务实 、 创 新 ”数据 库 技术 


的 理念 ， 长 期 致力 于 部 电 
返回 首页 高 等 教育 研究 和 技术 应 用 ”计算 机 网 络 
型 高 级 专门 人 才 的 培养 ， 打 造 精品 专业 ， 创 建 特色 名校 ，1997 年 被 至 育 部 确定 为 风 
全 国 示范 性 高 等 工程 专科 重点 建设 闻 校 ， 办 学 能 力 和 办 学 水 平 凸显 特色 和 优势 ，。 Java 程序 it 
在 邮电 行业 和 社会 享有 较 高 的 声誉 。 


近 几 年 来 ， 学 院 面 向 邮政 企业 开展 订单 拭 生 ， 为 邮政 企业 量 身 定做 企业 一 线 
急需 的 技能 人 才 ， 为 邮政 企业 输送 了 大 量 优秀 人 才 。 
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图 2-3 “学 院 简介 ”页 面 设计 


滚动 超 链接 中 ”静态 网 站 制作 ?链接 打开 的 页 面 设计 效果 如 图 2-5 所 示 , 在 网 页 打开 时 
有 随机 的 过 渡 效 果 , 而 且 网 页 打开 后 有 背景 音乐 ; 单 击 “背景 音乐 下 载 " 超 链接 会 弹出 “文件 
下 载 ? 对 话 框 , 如 图 2-6 所 示 。 其 他 超 链接 所 链接 到 的 页 面 暂时 还 没有 完成 设计 。 


2.1.2 网 页 文件 名 及 网 页 参数 设计 
由 于 本 栏目 首页 采用 框架 结构 设计 ,根据 图 1-1 项 目 总 体 结构 设计 ,该 框架 集 文件 名 设 
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我 的 专业 课程 


各 态 网 站 制作 


我 的 自白 所 机 组 装 维护 
石 邮 校训 全 襄 有 记 
学 院 简介 扰 融 上演 下 
下 计算 机 网 络 
返回 首页 Java 程序 设计 


[sp 动态 网 站 技术 


ASP. WET 
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图 2-4 “校园 风光 ”页 面 设计 


我 的 专业 课程 


课程 内 容 介绍 


我 的 自白 

这 是 一 门 学 习 静态 网 站 制作 技能 钓 课程 。 该 课程 根 
石 邮 校训 所 一 个 设计 好 的 网 站 项 目 ， 通 过 完成 局 站 项 目 中 的 各 个 
2 工作 任务 ， 学 习 HTIL 标 记 和 (CSS 样式 表 的 使 用 ， 学 习 使 
学 院 简 人 用 可 视 化 网 页 编辑 工具 制作 网 页 ， 学 习 使 用 图 像 处 理工 
i SD 
校园 风光 静态 网 站 制作 人 


在 今天 的 计算 机 网 络 世界 中 ， 网 站 是 信息 传播 的 主 融 关 网 站 初 从 
要 手段 。 作 为 现代 知识 分 子 ， 网 页 制作 技术 在 工作 和 生 
活 中 都 是 必 人 可 少 的 。 网 站 是 计算 机 鸡 络 上 的 最 基本 的 微机 组 装 维 护 
应 用 ， 也 是 计算 机 技术 的 基本 应 用 。 

(省 言 程序 设 
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版 权 所 有 石 容 庄 邮电 职业 技术 学 统 计 1236 班 孙 小 站 
和 我 联系 :73738163. com 
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计 为 prac2. html, 页 面 大 小 按照 1024X768px 窗口 设计 ,各 个 框架 尺寸 设计 如 图 2-7 所 示 。 
其 他 页 面 设计 为 : 

顶部 框架 中 栏目 标题 页 面 文件 名 为 prac2-1. html。 

左 框架 中 栏目 导航 栏 页 面 文件 名 prac2-2. html。 

右 框 架 中 滚动 超 链接 页 面 文件 名 prac2-3. html。 

底部 框架 中 版 权 页 面 文件 名 prac2-5. html。 
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| 顶部 框架 : 960X160px 
打开 此 类 文件 之 前 总 是 询问 他) 上 
ee 主 框架 ; 660 X400px 右 框架 ， 
生 el bd 人 要 和 区 站 和 151X400px 150X400px 


底部 框架 : 960X150px 


图 2-6 “文件 下 载 " 对 话 框 图 2-7 各 个 框架 尺寸 设计 


“我 的 自白 ”页 面 文件 名 prac2-4-1. html( 主 框架 初始 显示 页 面 ) 。 
“ 石 邮 校 训 ” 页 面 文件 名 prac2-4-2. html。 

“学 院 简介 ”页 面 文件 名 prac2-4-3. html。 
“校园 风光 ”页 面 文件 名 prac2-4-4. html。 

“静态 网 站 制作 ?页面 文件 名 prac2-3-1. html。 


2.2 HTML 文档 


2.2.1 HTML 文档 结构 
一 般 HTML 文档 结构 如 图 2-8 所 示 。 


HTML 文档 是 由 二 html 二 标记 开始 到 pa 
去 /html> 标 记 结束 的 文本 文件 。HTML 文档 分 | 届 疡 天 本 
成 头 部 和 正文 两 部 分 。 在 二 head 之 和 志 /head> </head> 
标记 之 间 的 网 页 头 部 是 对 文档 进行 说 明 , 控 制 的 “MX |] 
头 部 标记 ,如 文档 标题 ,背景 音乐 .页 面 刷新 、 页 NE 页 
面 过 渡 效 果 标记 等 。 另 外 CSS 代码 等 需要 放置 [Sb 


在 头 部 。 

头 部 标记 除了 常用 的 文档 标题 标记 一 title> 
之 外 ,常用 的 标记 是 二 meta 之 标记。 所 meta 二 标记 提供 网 页 的 编码 .说 明 等 信息 。 常 用 的 
内 容 如 下 。 

1. 设置 网 页 字符 编码 


图 2-8 HTML 文档 结构 


meta http-equiv= "Content-Type" content= "text/html;charset= gb2312"> 


该 标记 说 明 网 页 内 容 类 型 为 “文本 /html" 文 件 ,字符 编码 为 汉字 GB2312。 
2. 页 面 刷新 


二 meta http-equiv 二 "refresh"” content 一 "n[;URL 王 网 页 路 径 ] "过 


content 中 的 n 为 刷新 时 间 ,单位 是 秒 ; URL 表示 刷新 打开 的 页 面 ,一 般 是 自己 ,所 以 
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不 需要 书写 。 

3. 网 页 说 明 与 关键 字 

搜索 引擎 在 搜索 网 站 内 容 时 一 般 先 查 看 网 页 说 明 与 关键 字 , 所 以 在 网 页 头 部 经 常 使 
如 下 描述 。 

(1) 网 页 主要 内 容 描述 。 

二 meta name 一 "description” content 一 "此 网 页 内 容 的 概括 说 明 "之 

(2) 网 页 关键 字 。 

二 meta name 一 "KEYWords" contect 二 "关键 字 1, 关 键 字 2, .… "> 


注 : 设置 安全 区 域 。 当 网 页 中 有 Flash 动画 、JavaScript 脚本 文件 下 载 等 内 容 时 ,在 本 
地 浏览 网 页 时 会 出 现 “ 为 帮助 保护 您 的 安全 ,JInternet Explorer 已 经 限制 此 文件 显示 可 能 
访问 您 的 计算 机 的 活动 内 容 。 单 击 此 处 查看 选项 …… ?等 类 似 内 容 。 当 出 现 这 样 的 显示 时 ， 
可 以 通过 单 击 显示 的 信息 ,选择 “允许 阻止 的 内 容 ? 或 选择 “信息 栏 帮助 >, 了 解 如 何 关闭 这 种 
浏览 器 的 安全 提示 信息 栏 。 如 果 在 网 页 头 部 加 入 下 面 这 行 注 释 代码 : 


=!-- saved from url= (0013)about:internet --> 


即 在 运行 HTML 网 页 文件 时 ,浏览 器 安全 检查 使 用 Internet 安全 设置 级 别 而 不 使 用 本 
地 安全 设置 级 别 。 这 样 在 本 地 浏览 网 页 时 就 不 会 再 出 现 安全 信息 提示 ,但 是 添加 了 该 行 注 
释 信息 后 ,网 页 中 的 超 链 接 在 本 地 浏览 时 会 失效 (发 布 到 Internet 后 没有 问题 ) ,而 且 该 行 代 
码 也 会 影响 本 地 浏览 时 的 网 页 过 渡 效 果 。 

所 body 之 和 所 /body> 之 间 的 正文 部 分 (也 称 为 主体 部 分 ) 是 指示 浏览 器 窗 如 何 显示 网 
页 内 容 的 正文 标记 。 绝 大 多 数 HTML 标记 是 正文 标记 , 除 框架 标记 之 外 的 正文 标记 都 需 
要 放 在 二 body 二 … 王 /body> 标 记 之 内 使 用 。 


2.2.2 HTML 文档 规范 


网 页 文件 就 是 包含 HTML 标记 和 文本 内 容 的 ASCII 文档 ,一 般 称 作 HTML 文档 。 使 
用 常用 的 文本 文件 编辑 工具 都 可 以 生成 网 页 文件 ,但 在 书写 HTML 文档 时 也 需要 按照 一 
定 的 规则 ,否则 可 能 难以 达到 预期 的 效果 。 书 写 HTML 文档 需要 注意 以 下 几 点 。 

1. HTML 标记 书写 规则 

(1) 所 有 的 HTML 标记 及 其 标记 属性 都 必须 放置 在 二 二 内 。 > 在 HTML 文档 中 
是 敏感 符号 。 志 之 内 的 内 容 不 能 作为 网 页 内 容 显 示 在 浏览 器 窗口 上 ,所 以 非 HTML 标记 
不 能 用 二 二 括 起 来 。 如 果 必 须 在 浏览 器 上 显示 成 对 的 二 二 括 起 来 的 内 容 , 那 么 “二” 需要 在 
文档 中 用 “&lt;”, “二 ”需要 在 文档 中 用 “ &-gt; "表示 。 

在 书写 HTML 标记 时 ,标记 及 其 属性 必须 都 放置 在 二 二 之 内 ,在 二 > 之 外 的 内 容 不 
能 解释 成 HTML 标记 及 标记 属性 ,只 能 作为 页 面 内 容 ; 如 果 丢 了 标记 后 面 的 “之 ”, 就 会 产 
生 页 面 错误 , 即 不 能 按照 标记 意图 显示 信息 。 

(2) HTML 标记 及 其 属性 不 区 分 大 小 写 。 在 书写 HTML 标记 及 其 属性 时 不 必 注 意 大 
小 写 ,但 个 别 标 记 的 属性 值 区 分 大 小 写 。 字 母 和 符号 必须 是 在 西 文 .半角 状态 下 输入 ,如 二 、 
二 二、"、# ,数字 等 ,否则 会 产生 错误 。 还 要 注意 标记 格式 中 的 “-” 与 * ”的 区 别 , 用 错 了 就 
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会 产生 错误 。 
(3) 属性 之 间 的 间隔 为 空格 ,“ 过 ”和 标记 文字 之 间 不 能 有 空格 ,如 二 HTML 是 错误 
的 标记 。 


(4) 正确 书写 HTML 标记 、 属 性 。 浏 览 器 对 HTML 标记 有 很 强 的 容错 性 。 对 于 错误 
的 HTML 标记 ,浏览 器 将 不 解释 。 不 是 按照 规定 书写 的 HTML 标记 ,浏览 器 能 解释 的 会 
尽量 解释 。 

例如 ,HTML 标记 属性 值 一 般 格式 是 放置 在 "" 内 ,但 一 般 不 使 用 "" 也 是 可 以 的 。 例 如 
color 王 "#FF0000" 表 示 红 色 , 但 写成 color= # FF0000、color 二 ff0000, 其 至 写成 color== 
fftoo 都 可 以 ; 属性 之 间 的 间隔 规定 为 空格 ,但 使 用 前 后 带 空 格 的 ”,，” 做 间隔 也 不 会 产生 错 
误 ( 不 能 使 用 汉字 状态 的 ,”) 。 

HTML 标记 有 单 标记 和 双 标 记 ( 容 器 标记 ) ,例如 过 html 之 … 近 /html 之 二 body 之 … 
去 /body 之 。 双 标记 指示 包括 的 部 分 ,但 在 双 标 记 中 如 果 丢 失 了 结束 标记 ,浏览 器 往往 也 能 
够 包容 这 种 错误 。 

浏览 器 良好 的 容错 性 并 不 是 用 户 随意 书写 HTML 标记 的 理由 。 标 记 书 写 不 正确 就 不 
能 达到 预期 的 显示 效果 。 例 如 出 现 如 下 情况 : 


<title> ... <title> 
浏览 器 会 一 直 寻 找 二 /title 二 标记 ,结果 是 页 面 上 没有 任何 显示 ; 又 如 : 
color="#FF0000 


由 于 使 用 了 " ,浏览 器 会 一 直 找 到 下 一 个 "为 止 ,."" 之 间 的 内 容 作为 color 属性 值 ,结果 
不 仅 color 属性 值 错 了 ,而 且 可 能 使 很 多 标记 都 被 当做 字符 串 , 失 去 了 标记 的 作用 。 

(5) 结构 标记 不 要 重复 使 用 。 在 一 个 HTML 文档 中 应 该 具有 一 个 头 部 (可 以 没有 头 
部 ) 和 正文 部 分 。 如 果 多 次 使 用 二 head 之 和 过 body 之 标记 ,虽然 浏览 时 不 会 发 生 错 误 ,但 在 
概念 上 是 不 合理 的 。 

(6) 标记 可 以 嵌 套 ,但 不 能 交叉 。 对 于 双 标记 的 使 用 必须 注意 ,标记 内 可 以 包含 和 嵌 套 
其 他 标记 。 例 如 : 


过 font color 王 red 之 B> 标 记 嵌 套 </B></font> 
但 是 如 果 两 个 双 标记 发 生 了 交叉 就 是 错误 的 。 例 如 : 
过 font color 王 red 过 B> 标 记 交 又 </font></B> 


2. HTML 文档 存放 目录 

在 动手 制作 网 页 之 前 ,需要 做 好 一 些 准备 工作 ,例如 ,图 片 素材 文件 存放 在 哪里 ,网 页 文 
件 存 放 在 哪里 。 建 议 首 先 在 本 地 硬盘 或 U 盘 上 创建 一 个 网 站 文件 夹 , 准 备 存放 制作 的 . 
html 网 页 文件 。 在 该 文件 夹 下 ,创建 一 个 images 子 文件 夹 存放 图 片 . 动 画 等 素材 。 这 样 在 
引用 图 片 文件 时 ,路 径 就 可 以 使 用 相对 路 径 images\X XX. XXX。 

3. HTML 文档 的 可 发 布 性 与 可 移植 性 

网 站 可 以 放置 在 自己 的 Web 服务 器 上 .也 可 以 发 布 到 Internet 中 的 Web 服务 器 上 。 
目前 Web 服务 器 的 操作 系统 类 型 主要 是 Windows 和 Linux(UNIX)。 由 于 这 两 种 系统 不 
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是 完全 兼容 的 ,所 以 在 文件 夹 .文件 名 的 命名 上 需要 考虑 HTML 文档 的 可 发 布 性 与 可 移植 
性 , 即 在 这 两 种 系统 上 的 兼容 性 。 当 不 知道 网 站 会 放置 在 哪 种 服务 器 上 时 ,尤其 需要 注意 这 
个 问题 。 

HTML 文档 的 可 发 布 性 与 可 移植 性 主要 需要 注意 以 下 几 点 。 

(1) 首页 文件 名 统一 使 用 index. htm 或 index. html。 

(2) 文件 夹 名 ,文件 名 中 不 能 使 用 汉字 。 

(3) 在 Linux 中 文件 名 是 区 分 大 小 写 的 ,所 以 文件 夹 名 、 文 件 名 需要 统一 使 用 大 写 或 小 
写字 母 ,在 超 链接 及 源 文件 路 径 中 也 要 统一 使 用 大 写 或 小 写字 母 。 

(4) 文件 名 中 只 能 使 用 一 个 “. "分隔 文 件 名 与 文件 扩展 名 。 


2.3 “我 的 自白 ”页 面 制 作 


该 任务 完成 HTML 标记 栏目 中 的 “我 的 自白 ”网 页 prac2-4. html 文档 的 制作 。 页 面 大 
小 按照 660X400px 制作 。 页 面 中 文字 大 小 、 颜 色 、 上 标 符号 等 内 容 的 实现 需要 使 用 HTML 
页 面 排版 标记 。 


2.3.1 页 面 排 版 标记 


页 面 排版 标记 功能 类 似 Word 中 的 版 面 格式 设置 ,例如 标题 ,文字 修饰 .段落 安排 等 。 
学 习 该 部 分 标记 时 可 以 和 Word 中 的 功能 比照 学 习 , 更 容易 理解 和 掌握 。 


1. 标题 标记 EDEOO , 

在 Word 的 格式 列表 框 中 有 标题 项 ,每 种 标题 “| 文件 名 纺 包 查看 WW 收 训 W) 工 >| 昼 

对 应 一 种 字体 、 大 小 等 标题 格式 。 了 “ 
这 是 HI 标题 样式 


HTML 的 标题 是 通过 二 Hi 二 … 达 /Hi 二 来 实 
现 的 ,数字 i 的 取 值 为 1~6, 即 共有 Hl1~H6 6 种 标 | 这 是 H2 标 题 样式 
之 品 二 
题 格式 。 <H1> 为 最 大 字 3 。6 种 标题 格式 的 样式 这 是 H3 标 题 样式 
显示 如 图 2-9 所 示 。 
HTML 的 标题 和 一 般 文本 的 不 同 是 每 个 标题 | 这 是 14 标题 样式 
需要 独占 一 行 。 NE 


在 标题 标记 中 可 以 使 用 水 平 对 齐 属 性 : em 加 
EERESE 4% 


二 H1 align 二 "对 齐 方式 "二 

对 齐 方式 可 以 使 用 : 

left 一 一 左 对 齐 ( 默 认 ); 

right 一 一 右 对 齐 ; 

center 一 一 中 间 对 齐 。 

2. 分 段 与 换行 标记 

(1) 分 段 与 换行 标记 。 文 字 分 段 标记 是 二 p 之 … 到 /p> ,指示 文本 另 起 一 段 。 
与 分 段 标记 功能 相似 的 一 个 标记 是 分 块 标记 所 div 之 …</div>。 

换行 标记 是 二 br 二 ,指示 文字 从 这 里 换行 显示 。 这 是 一 个 单 标记 。 


2-9 标题 样式 
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在 正文 部 分 放置 的 文本 如 果 不 使 用 分 段 与 换行 标记 ,文字 将 显示 在 一 行 上 。 如 果 一 行 
的 文字 太 长 ,浏览 器 的 一 行 显 示 不 开 时 ,浏览 器 会 自动 换行 显示 ,但 实际 还 是 一 个 逻辑 行 。 
这 样 形成 的 换行 在 改变 浏览 器 窗口 大 小 时 ,每 行 上 的 显示 内 容 将 发 生 改 变 。 分 段 与 分 行 标 
记 强制 文字 的 分 段 与 换行 ,使 文字 的 显示 格式 与 浏览 器 窗口 的 大 小 无 关 。 

在 使 用 文本 编辑 工具 制作 网 页 时 ,在 文本 行 中 加 入 回 车 形成 的 换行 对 于 浏览 器 是 无 效 
的 。 虽 然 在 编辑 时 看 上 去 是 几 行 ,但 对 于 浏览 器 是 一 个 逻辑 行 ,所 以 需要 换行 的 地 方 必须 使 
用 二 br 过 标记 。 

去 br> 标 记 和 过 p 之 标记 都 有 另 起 一 行 的 功能 ,但 它们 形成 的 行距 不 同 , 志 p 之 标记 会 产 
生 段 前 、 段 后 的 行距 。 

(2) 文本 对 齐 。 在 二 p 之 .过 div 之 标记 中 都 可 以 像 过 Hi 标题 标记 一 样 使 用 align 属性 
指定 文本 对 齐 方式 。 

到 center 二 … 到 /center> 是 一 个 居中 对 齐 标记 ,用 来 指定 文本 的 居中 对 齐 方式 。 

(3) 王 span 之 标记。 所 span 之 标记 用 于 指示 一 个 范围 ,类 似 于 过 p 之 标记 和 所 div 之 标 
记 。 去 span 之 标记 没有 自己 的 属性 ,一 般 和 CSS 样式 一 起 使 用 。 

3. 水 平 线 标记 

三 hr 二 标记 是 在 页 面 上 当前 位 置 插入 一 条 水 平 线 , 水 平 线 需要 单独 在 一 行 上 。 二 hr 二 
是 单 标记 。 过 hr 二 标记 的 常用 属性 如 下 : 
水 平 对 齐 方式 。 默 认 居中 对 齐 。 


align= "left|right| center" 
size 一 "像素 数 "一 一 线 宽 ( 高 ) 。 
width 二 "像素 数 1n%" 一 一 水 平 线 长 度 。 可 以 用 像素 数 或 浏览 器 窗口 宽度 的 百分数 
表示 。 
Color= "颜色 ”一 一 水 平 线 的 颜色 。 
Noshade 一 一 水 平 线 一 般 为 立体 效果 。 加 入 该 属性 后 ,水平线 为 平面 实 线 。 
下 面 是 在 浏览 器 上 显示 一 个 宽度 为 5px, 长 度 为 窗口 的 80% 绿色 、 居 中 立体 效果 的 水 
平 线 标记 代码 。 


<hr color= "green" size="5" width="80%"> 


4. 字体 标记 
字体 标记 <<font 二 用 于 设置 文本 的 字体 名 称 、 颜 色 和 大 小 ,常用 格式 为 : 


过 font face 二 "字体 名 ”" size 二"n" color 一 "颜色 "> … 到 /font> 


字体 名 是 Windows 中 常见 的 字体 名 称 ,如 隶书 、 宋 体 、 黑 体 等 ,默认 为 宋体 。 

size 属性 指定 字体 大 小 ,n= 二 1~7,7 为 最 大 字体 。 使 用 二 font 二 标记 size 属性 指定 的 字 
体 大 小 受 浏 览 器 字体 大 小 设置 的 影响 。 

color 属性 用 于 指定 字体 的 颜色 。 在 所 有 HTML 标记 中 ,颜色 设置 都 可 以 使 用 以 下 
形式 : 


# RRGGBB 
RRGGBB 
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RGB(r,g,b) 

色彩 名 

RRGGBB 表示 红 、 绿 、 蓝 三 原色 的 十 六 进 制 色彩 值 。 每 种 颜色 使 用 两 位 十 六 进 制 数 
00 一 FF。 数 值 越 大 表示 该 种 颜色 的 含量 越 大 。 

使 用 # RRGGBB 和 RRGGBB 的 效果 是 一 样 的 。 

RGB(r,g,b) 是 一 个 函数 ,rgb 是 用 十 进 制 数 表示 的 色彩 值 , 范 围 是 0 一 255, 和 用 十 六 
进 制 数 表示 的 范围 是 一 样 的 。 

使 用 数值 表示 的 颜色 一 共有 256X256X256 种 , 即 24 位 真 彩 ,但 有 的 显示 器 可 能 不 能 
显示 这 么 多 的 颜色 。 为 了 使 页 面 在 所 有 显示 器 显示 的 色彩 一 致 ,提倡 使 用 Web 安全 色 ( 浏 
览 器 安全 色 )。Web 安全 色 包 括 216 种 颜色 , 即 每 种 颜色 值 只 能 使 用 00.33.66.99 .CC FF。 
在 三 剑客 工具 中 “颜色 样板 ”提供 的 颜色 都 是 Web 安全 色 。 

色彩 名 是 英文 单词 表示 的 色彩 。 常 用 的 色彩 名 称 见 表 2-1。 

表 2-1 常用 色彩 名 称 


色彩 名 称 色彩 名 称 色彩 名 称 色彩 名 称 
红 red 黑 black 灰 gray 天 蓝 skyblue 
橙 orange 蓝 blue 银灰 silver 草绿 iawngreen 
黄 yellow 党 purple 金黄 gold 海蓝 navy 
绿 green 白 white 棕 褐 tan 橘红 orangered 


使 用 字体 标记 时 注意 , 忆 font 之 标记 是 双 标 记 , 如 果 丢 失 了 结束 标记 ,那么 以 后 的 文本 
都 将 按 该 标记 指定 的 属性 显示 。 
5. 字体 修饰 标记 
Word 中 字体 的 加 粗 、 斜 体 , 下 划 线 、 删 除 线 、 上 标 、 下 标的 格式 设置 在 HTML 文档 中 使 
用 以 下 标记 实现 : 
<B>>…</B> 一 一 加 粗 
过 这 … </[ 记 一 斜体 
<U> … <</U> 一 一 下 划 线 
<S> … <</S> 一 一 删除 线 
<SUP> … </SUP>> 一 一 上 标 
<SUB> … </SUB> 一 一 下 标 
6. 特殊 字符 
在 HTML 文档 中 ,一 些 字符 在 文档 中 有 特殊 的 含义 ,如 二 ,二 、& 等 ; 或 者 会 被 浏览 器 
忽略 ,如 空格 。 这 些 字符 在 文档 中 作为 需要 显示 在 浏览 器 上 的 符号 使 用 时 ,必须 使 用 转 义 字 
符 “& 符号 名 ; ?或 中井 数 值 ; "表示 。 常 用 的 特殊 符号 及 表示 方法 见 表 2-2。 
表 2-2 常用 特殊 符号 及 表示 方法 
< &lt; 了 &#60; & Bamp; #38; 
> Bgt; RB.#62; 空格 Bnbsp; .#160; 
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注意 后 级 “; ”不 能 使 用 汉字 状态 的 “; ”。 

7. 注释 标记 

注释 标记 是 指 代 码 中 对 代码 内 容 的 注释 。 注 释 标 记 内 的 内 容 不 会 在 浏览 器 窗口 中 显 
示 。 注 释 标记 格式 为 : 


去 ! -- 注 释 内 容 -- > 


注释 内 容 可 以 是 多 行 。 注 释 标 记 常 见 的 用 途 是 放置 JavaScript 脚本 ,目的 是 浏览 器 不 
支持 JavaScript 脚本 时 可 以 忽略 脚本 。 还 有 就 是 放置 引用 其 他 文件 的 命令 : 


<!-- #include file="xxx.inc" -- > 
当 引 用 的 文件 不 存在 时 可 以 忽略 。 
2.3.2 ”我 的 自白 "页面 制 作 


1. 创建 prac2-4-1. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-4-1. html。 
2. 制作 “我 的 自白 "网 页 文件 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

过 title 过 我 的 自白 三/title 二 

</head> 

<body> 

<br> 

<p align= "center"> 

二!-- 下 面 是 标题 和 署名 ,“ 孙 小 站 "需要 换 成 作者 的 名 字 -- 二 

过 font size 一 "4" face 二 "黑体 " 志 > 我 的 自白 </font><br> 

过 font size 二 "3" face 一 "楷体 _GB2312" 之 孙 小 站 <</font 

<hr color= "green" width=80%> 

</p> 

<p> 

<font size 一 "3" > 

&nbsp; &nbsp; &nbsp; &nbsp; 我 在 今年 的 高 考 中 ,虽然 不 是 名 落 孙 山 , 但 也 失去 了 我 多 年 的 清华 、 
北大 梦想 .经 过 了 无 数 恒 夜 的 忧郁 、 簿 特 之 后 ,我 选择 了 石家庄 邮电 职业 技术 学 院 , 开始 了 我 的 大 学 
生涯 .<br 二 

&nbsp; &nbsp; &nbsp; &nbsp; 在 大 学 的 日 日 夜 夜里 ,我 想 了 许多 ,也 明白 了 许多 .人生 的 价值 在 于 
为 社会 做 出 自己 最 大 的 贡献 ,而 不 在 于 从 事 什么 工作 .我 们 在 大 学 中 要 认识 到 自己 对 国家 、 对 家 庭 、 
对 自己 肩负 的 责任 ,努力 学 习 专业 技能 ,使 自己 成 为 对 社会 有 用 的 人 .我 想 用 我 喜欢 的 一 首 诗 和 同学 
共勉 : 二 /font> 二 /pp 二 

过 p align 一 "center" 二 一 font face 二 "黑体 " size="4" 二 登 芍 省 楼 一 sup>@ 二 /sup> 王 /font 二 /p> 
过 p align 二 "center" 之 过 b> 过 font face==" 楷 体 _GB2312" size 一 "4" 之 白 日 依 山 尽 , 黄 河 人 海流 .</br> 
欲 穷 千里 目 ,更 上 一 层 楼 .<</font></b></p> 

<hr color= "green" width=80%> 

<p> </font><font size="2"> &nbsp; Lnbsp; OD 

作者 : &&lt; 王 之 澳 &&gt; , 字 季 陵 , 唐 代 晋 阳 人 .</font></p 
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</font></P> 
</body> 
</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-4-1. html, 查 看 显示 内 容 是 否 正 
确 。 如 果 标 记 书 写 错误 ,显示 内 容 就 会 发 生 错 误 ; 在 内 容 显 示 正 确 后 ,调整 Widows 窗口 显 
示 尺 寸 (不 包括 菜单 栏 、 地 址 栏 等 区 域 ,页 面 “文字 大 小 ”设置 为 * 中 ”, 下 同 ) 大 约 为 660X 
400px 时 ,页 面 显示 效果 如 图 2-10 所 示 。 

下 pracl-4 - Microsoft Internet Explorer 


; 文件 下) 编辑 下 ) 查看 他 收 总 QQ) 工具 CD) 帮助 0 
; 地址 四) | 人 it webxvprac2-4-Lhtnl 


我 在 今年 的 高 考 中 ， 星 然 不 是 名 落 孙 山 ， 但 也 失去 了 我 多 年 的 清华 、 北 大 梦想 。 经 过 了 无 数 
2 NR 我 选择 了 石家庄 邮电 职业 技术 学 院 ， 开 始 了 我 的 大 学 生涯 。 
日 夜 夜里 ， 我 想 了 许多 ， 人 ee Ld np hd lee 
A 人 人: 我 们 在 大 学 中 要 认识 到 自 家 、 Ee: 对 自己 肩负 的 责 


任 ， 努 力学 习 专业 技能 ， 使 自己 成 为 对 社会 有 用 的 人 。 是 有 x 的 一 首 诗 和 同学 共勉， 


登 铀 省 楼 @ 


白 日 依 山 尽 ， 黄 河 入 海流 。 
欲 穷 千里 目 ， 更 上 一 层 楼 。 


@ 作者 :< 和 王 之 澳 >， 字 季 陵 ， 唐 代 晋 队 人 。 


图 2-10 “我 的 自白 页面 显示 效果 


2.4 网 站 标题 网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 网 站 标题 网 页 prac2-1. html 文档 的 制作 。 页 面 大 小 
按照 960X160px 制作 ,页 面 中 使 用 了 背景 图 片 “images\tp2-1. jpg”, 设 置 页 面 背 景 图 片 需要 
在 HTML 正文 标记 中 完成 。 

2.4.1 正文 标记 二 body 二 

去 body> 标 记 指示 网 页 的 正文 .主体 部 分 , 它 的 属性 用 于 设置 页 面 的 属性 。 

去 body> 标 记 常 用 格式 为 : 

过 body text= "颜色 ”background 一 "背景 图 片 路 径 " bgcolor 二 "颜色 " link 二 "颜色 "vlink 二 "颜色 " 


alink 一 "颜色 " topmargin 一 "n" leftmargin 二 "n"> 
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具体 解释 如 下 。 

text 一 "颜色 ": 设置 页 面 文字 默认 颜色 。 

bgcolor 二 "颜色 ": 设置 页 面 背 景色 。 

background 王 "背景 图 片 路 径 ": 设置 背景 图 片 (路 径 说 明 见 2. 5 节 )。 

link 二 "颜色 " vlink 二 "颜色 " alink 二 "颜色 ": 设置 超 链接 、 访 问 过 的 超 链 接 、 活 动 超 链 
接 文本 颜色 。 

topmargin 一 "n": 设置 页 面 顶部 边 距 (像素 ) 。 

leftmargin 一 "n": 设置 页 面 左 边 距 (像素 )。 

注意 在 设置 页 面 属性 时 ,一 个 页 面 内 的 背景 色 和 背景 图 片 不 能 同时 使 用 。 背 景 图 片 的 
大 小 与 页 面 的 大 小 没有 关系 。 当 背景 图 片 比 页 面 小 时 ,背景 图 片 会 自动 重复 。 


2.4.2 网 站 标题 网 页 制作 


1. 创建 prac2-1. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-1. html。 
2. 制作 网 站 标题 网 页 文件 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

<title> 网 站 标题 一 /title> 

</head> 

<body background= "images/tp2-1.jpg" topmargin="60"> 

<p align= "center"> 

过 font size 一 "7" color 二 "red" face 一 "隶书 "> 我 的 大 学 </font></p> 
</body> 

</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-1. html, 页 面 显示 中 文字 可 能 不 
是 隶书 字体 ,这 时 因为 Windows 中 没有 安装 隶书 字体 ; 调整 Widows 窗口 显示 尺寸 大 约 为 
960X160px 时 ,页 面 显示 效果 如 图 2-11 所 示 。 


文件 编辑 上 查看 VW) 收 语 @) 工具 (TD) 帮助 和 
[DJBE“ 避 “ 剖 加 从 | 岂 搞 索 习 收 藏 天 @ ri > 3 
J un Emyweb prac2-L rtm 


图 2-11 网 站 标题 网 页 
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2.5 “ 石 邮 校 训 ” 网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 “ 石 邮 校训 ”网 页 prac2-4-2. html 文档 的 制作 。 页 面 
大 小 按照 660X400px 制作 ,网 页 中 使 用 images\tp2-2. jpg 素材 图 片 。 


2.5.1 图 像 标记 
图 像 标 记 常 用 格式 为 : 


过 img src 二 "URL"” [alt=" 替 换文 本" width 一 "n" height 一 "n" align 一 "对 齐 方式 "border 一 "ny" 

hspace="n" vspace="n" ] 

“[ J]” 内 是 可 以 选择 的 属性 (下 同 ) ,具体 解释 如 下 : 

(1) src 属性 。 该 属性 值 URL( 统 一 资源 定位 器 ) 指 示 引 用 图 像 文件 的 路 径 。 图 像 文件 
的 路 径 可 能 是 绝对 路 径 或 是 相对 路 径 。 

@ 绝对 路 径 : 从 协议 开始 的 URL 地 址 或 从 驱动 器 名 称 开始 的 本 地 文件 路 径 都 称 为 绝 
对 路 径 , 如 : 

http://www. yudu. com/images/2023. jpg 

E:\prac\tp2.jpg 
都 是 绝对 路 径 , 注 意 两 种 路 径 中 的 “/” 与 ”的 用 法 。 

@ 相对 路 径 : 从 本 文件 存储 位 置 开始 的 路 径 。 

例如 ,在 本 地 D 驱动 器 上 有 如 下 所 示 的 目录 结构 : 


Di\sitel 


Index.htm 
Images 

| 一 phlipg 
-一 ph2jpg 
一 一 Code 

上 一 Tohgn.htm 
—Dax.htm 


如 果 在 Index. htm 文件 中 引用 phl. jpg 文件 ,其 相对 路 径 为 Images\phl. jpg。 

如 果 在 Dax. htm 文件 中 引用 phl. jpg 文件 ,其 相对 路 径 为 .. \Images\phl. jpg,. . 表示 
上 级 目录 。 

在 制作 网 页 时 ,一 般 不 使 用 绝对 路 径 。 因 为 对 本 地 文件 的 引用 使 用 绝对 路 径 都 是 从 盘 
符 开始 的 。 当 网 页 发 布 之 后 (发 布 到 Web 服务 器 所 在 的 计算 机 上 ) ,使 用 绝对 路 径 表示 的 文 
件 肯定 是 找 不 到 了 ,就 会 引发 网 页 链接 错误 。 

注意 : 在 文件 系统 中 路 径 表 示 经 常 使 用 “\” 符 号 ,但 在 网 页 中 的 路 径 要 求 使 用 */” 符 号 。 
有 时 两 者 不 加 区 别 , 但 有 些 地 方 使 用 “\” 符 号 时 会 出 现 错误 。 

(2) alt 属性 。 该 属性 值 用 于 在 鼠标 指向 该 图 片 时 显示 的 文字 说 明 。 该 属性 的 另 一 个 
作用 是 ,如 果 浏 览 器 设置 中 禁止 显示 图 片 .那么 在 图 片 位 置 处 显示 该 文字 。 

(3) width、height 属 性。 这 两 个 属性 值 指示 图 片 在 网 页 上 显示 的 宽度 和 高 度 。 可 以 
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像素 数 表 示 , 也 可 以 使 用 浏览 器 窗口 的 百分数 表示 。 这 两 个 属性 只 是 控制 图 片 在 网 页 上 
的 显示 尺寸 ,但 不 能 改变 图 片 实际 尺寸 的 大 小 。 使 用 width、height 属性 有 时 可 能 会 造成 
图 片 显示 的 纵横 比例 不 太 合适 。 不 使 用 这 两 个 属性 时 ,图 片 会 按 原 图 片 大 小 显示 。 如 果 
不 希望 使 用 width .height 属性 ,又 希望 改变 原 图 片 的 大 小 ,那么 可 以 使 用 图 像 编 辑 工 具 
解决 。 

(4) border 属性 。 使 用 该 属性 可 以 给 图 片 加 上 边框 。 边 框 宽度 为 该 属性 值 指定 的 像素 
数 。border 二 "0" 和 省 略 该 属性 的 效果 一 样 。 

(5) 图 像 对 齐 方式 。 二 img 之 标记 的 align 属性 值 有 : 


top|middle| bottom| baseline| texttop| absbottom| absmiddle|left| right 


除 left 和 right 之 外 的 对 齐 属 性 称 作 行 对 齐 属 性 。 行 对 齐 指示 图 片 与 该 行文 字 的 对 
齐 方式 。 图 片 在 页 面 上 要 占 一 个 文本 行 。 如 果 该 行 上 有 文字 ,就 存在 和 该 行 上 文字 的 对 
齐 关 系 。 因 为 图 片 尺寸 一 般 大 于 文字 尺寸 ,与 其 说 图 片 的 对 齐 方式 ,不 如 说 该 行文 字 的 
对 齐 方式 。 行 对 齐 是 图 片 和 文本 行 的 垂直 对 齐 关 系 。 而 且 图 片 总 是 在 该 行 的 左 侧 ,不 可 
能 居中 或 靠 右 侧 显示 。 图 片 在 页 面 中 没有 垂直 对 齐 属性 ,垂直 位 置 是 图 片 所 在 行 的 开始 
位 置 。 

top \texttop 一 一 文字 顶部 与 图 片 项 部 对 齐 。 

bottom .baseline ,absbottom 一 一 文字 底部 与 图 片 底部 对 齐 ( 默 认 对 齐 方式 ) 。 

middle 一 一 居中 对 齐 方式 。 居 中 对 齐 是 文字 底部 与 图 片 中 线 对 齐 。 

absmiddle 一 一 绝对 中 间 对 齐 , 图 片 中 线 与 文字 中 线 的 对 齐 。 

(6) hspace、vspace 属性 。 规 定 图 片 周围 和 文字 之 间 的 水 平和 垂直 间距 。 


2.5.2 ”五 邮 校训 "网 页 制作 


1. 创建 prac2-4-2. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 : prac2-4-2. html。 
2. 制作 “ 石 邮 校 训 ” 网 页 文件 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

过 title> 石 邮 校 训 达 /title 二 

</head> 

<body > 

过 p align 一 "center" 记过 font face 一 "华文 彩云 " color 二 #003300 size 一 "6" 过 石 邮 校 训 王 /font 盖 <</p> 
<p align 一 "center" 过 一 img src 一 "images/tp2-2.jpg" alt= "石家庄 邮电 职业 技术 学 院 校训 "> 
</body> 

</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-4-2. html, 页 面 显示 中 可 能 会 有 


字体 显示 不 正确 问题 ,这 时 由 于 Windows 中 的 安装 字体 种 类 不 同 造 成 的 (以 后 不 青 说 明 ); 
调整 Widows 窗口 显示 尺寸 大 约 为 660X400px 时 ,页 面 显示 效果 如 图 2-12 所 示 。 


C 〇 DCCB@CD Wem 


涯 五 邮 校 训 - 了 crosoft Internet Explorer 
文件 四 “编辑 四。 查看 咱 ” 收 闻 全) 工具 加。 帮助 加 
起 业 加 ) | 全 if vvebxvprec2-4-2 htnl 


图 2-12 “ 石 邮 校训 ”网 页 


2.6 “学 院 简介 ”网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 “学 院 简介 ”网 页 prac2-4-3. html 文档 的 制作 。 页 面 
大 小 按照 660X400px 制作 ,网 页 中 使 用 images\tp2-3. jpg 素材 图 片 。 
2.6.1 图 文 混 排 

在 二 ima 之 标记 中 ,align 属性 值 使 用 left right 时 ,图 片 和 文字 没有 行 对 齐 关系 , 即 图 片 
和 文字 行 没有 同行 的 关系 ,图 片 不 再 只 占 一 个 文本 行 ,所 以 align 属性 值 使 用 left、right 时 ， 
页 面 可 以 实现 图 文 混 排 。 
2.6.2 ”学 院 简 介 " 网 页 制作 

1. 创建 prac2-4-3. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-4-3. html。 


2. 制作 ”学 院 简介 ”网 页 文件 
在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


=<html> 

<head> 

<title> 学 院 简介 二 /title> 

</head> 

<body> 

>p align 一 "center" 盖 一 font color 一 " 井 003300" size 一 "6" face 一 "华文 彩云 "石家庄 邮电 职业 技术 
学 院 简介 天 /font> 王 /p> 
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<p><img src="images/tp2-3.jpg" width="400" height="170" hspace="20" vspace= "20" 
align 一 "left" 之 < 过 font size 一 "4" 之 &nbsp;&nbsp;&nbsp;&nbsp; 石 家 庄 邮 电 职 业 技 术 学 院 原 为 石 
家 庄 邮 政 高 等 专科 学 校 , 始 建 于 1956 年 ,为 全 国 邮 电 行 业 知名 院 校 .在 近 五 十 年 的 办 学 历程 中 ,学 院 
始终 坚持 “服务 邮电 、 贡 献 社会 "的 宗旨 和 “务实 、 创 新 "的 理念 ,长 期 致力 于 邮电 高 等 教育 研究 和 技术 
应 用 型 高 级 专门 人 才 的 培养 ,打造 精品 专业 ,创建 特色 名 校 ,1997 年 被 教育 部 确定 为 全 国 示范 性 高 
等 工程 专科 重点 建设 学 校 , 办 学 能 力 和 办 学 水 平 凸显 特色 和 优势 ,在 邮电 行业 和 社会 享有 较 高 的 
声誉 . 

</p> 

过 p>&nbsp; &nbsp; &nbsp; &nbsp; 近 几 年 来 ,学 院 面 向 邮政 企业 开展 订单 招生 ,为 邮政 企业 量 身 
定做 企业 一 线 急 需 的 技能 人 才 ,为 邮政 企业 输送 了 大 量 优秀 人 才 . 王 /font> 志 /p> 

</body> 

</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-4-3. html, 检 查 页 面 内 容 显示 是 
否 正确 。 内 容 正确 后 ,调整 Widows 窗口 显示 尺寸 大 约 为 660X400px 时 ,页 面 显示 效果 如 
图 2-13 所 示 。 


文件 思 。 轴 强 到 查看 中) 收藏 由 工具 人 着 胸 0 
地 让 加 | 本 icwvebswrace-4-3 hinl 


or ph EO I 
看 浴 庄 部 电 职 业 技术 学区 御 介 
石家庄 邮电 职业 技术 学 院 原 为 
石家庄 邮政 高 等 专科 学 校 ， 始 建 于 
1956 年 ， 为 全 国 邮电 行业 知名 院 
。 校 。 在 近 五 十 年 的 办 学 历程 中 ， 学 
院 始终 坚持 “服务 邮电 、 贡 献 社 
会 ”的 宗 台 和 “务实 、 创 新 ”的 理 
念 ， 长 类 到 力 于 邮电 高 等 教育 研究 
和 技术 应 用 型 高 级 专门 人 才 的 培 
养 ， 打 造 精品 专业 ， 创 建 特色 名 
校 ，1997 年 被 教育 部 确定 为 全 国 示 
范 性 高 等 工程 专科 重点 建设 学 校 ， 办 学 能 力 和 办 学 水 平 凸显 特色 和 优势 ， 在 邮电 行业 和 社 
会 享有 较 高 的 声誉 。 


近 几 年 来 ， 学 院 面向 邮政 企业 开展 订单 招生 ， 为 邮政 企业 量 身 定做 企业 一 线 急需 的 技 
能 人 才 ， 为 邮政 企业 输送 了 大 量 优秀 人 才 。 


图 2-13 “学 院 简介 ”网 页 


2.7 “校园 风光 ”网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 “校园 风光 ”网 页 prac2-4-4. html 文档 的 制作 。 页 面 
大 小 按照 660X400px 制作 ,网 页 中 有 大 小 不 一 的 4 个 图 片 images\tp2-4. jpg、tp2-5. jpg、 
tp2-6. jpg、tp2-7. jpg。 只 使 用 图 像 标记 不 能 实现 网 页 布局 要 求 , 该 网 页 需要 使 用 HTML 表 
格 标记 完成 网 页 布局 。 


2.7.1 表格 标记 


表格 是 使 用 行 和 列 的 形式 在 网 页 上 组 织 信息 的 ,是 最 基本 的 网 页 布局 技术 ,几乎 所 有 网 
页 中 都 能 见 到 表格 。 表 格 标记 也 是 最 复杂 的 标记 。 
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1. 基本 的 表格 标记 
标记 一 个 表格 最 基本 的 标记 如 下 ， 
<table border="n"> 
[二 caption> 表格 标题 一 /caption>] 
[<t> 


二 th> 列 标题 1</th> 
二 th> 列 标题 2</th> 


</tr>] 

<tr> 
<<td> 列 内 容 1</td> 
<<td> 列 内 容 2<</td> 


<</tr> 
<tr> 
<<td> 列 内 容 1<</td> 
<<td> 列 内 容 2<</td>> 


<</tr> 


</table> 


<<tr>>…</tr> 标记 一 个 表 行 。 

三 了 h 二 … 达 /th 标记 一 个 列 标题 单元 格 。 
<<td>…<</td> 标 记 一 个 普通 单元 格 。 

二 table 志 标记 属性 border 指示 表格 有 无 表格 线 。 


例如 ,图 2-14 所 示 的 表格 可 以 使 用 如 下 标记 实现 : 


<html> 

<head> 
<title> 简 单 表格 一 /title> 
</head> 

<body> 

<table border="1"> 

到 caption 二 学 生 信息 二 /caption 二 
<tr> 

三 th 二 姓 名 </th> 

二 th 二 学校 </th> 

过 了 h 二 专业 过 /th 二 

</tr> 

<tr> 

三 td 志 王 国明 </td> 

二 td 中 国 科技 大 学 <</td> 
过 td 二 计算 机 过 /td 二 
</t> 

<tr> 

过 td 二 侯 玉 喜 </td> 

过 td 二 浙江 大 学 过 /td 

过 td 二 自动 化 </td 二 
</u> 


-ID|X| 
文件 E) 编辑 E) 查看 MW 收 ” 职 
[EECEERF 本 9 
地 址 (D) [eewywz] 回转 到 | 链接 ” 


学 生 信息 


[是 名 | 池 术 [专业 
王国 明 让 男 和 技 大 学生 机 
[ 芋 本 沿江 大 学 上天 


一 
ll I EL 
图 2-14 简单 表格 
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</table> 
</body> 
</html> 


去 td> 过 th> 标 记 的 结束 标记 可 以 省 略 , 上 面 表格 部 分 可 以 写成 : 


<table border="1"> 

过 caption> 学 生 信 息 <</caption> 

过 tr 之 之 th 姓名 过 th 二 学 校 二 t 耻 专业 </tr>> 

二 tr>><td> 王 国明 <td> 中 国 科技 大 学 td 二 计算 机 <</tr 二 

二 tr><td> 侯 玉 喜 二 td 二 浙江 大 学 <<td 二 自动 化 </tr 二 

</table> 

这 样 ,看 上 去 就 简单 多 了 。 另 外 在 网 页 上 使 用 表格 组 织 内 容 时 ,一 般 不 使 用 表格 标题 、 
列 标题 ,所 以 常用 的 只 有 <table> `<<tr> .<<td> 标 记 。 

2. 二 table 二 标记 属性 

一 table 二 标记 属性 是 针对 表格 的 属性 。 常 用 的 属性 有 : 

<table border="n"align= "left| right| center" width="n|n%" height="n|n%”bordercolor==" 边 框 

颜色 " bgcolor 二 "背景 颜色 "background 二 "背景 图 片 URL" cellpadding 一 "n”cellspacing 一 "n" 之 … 

</table> 

border: 属性 值 为 0 或 省 略 该 属性 时 表示 不 显示 表格 线 。 

align: 表格 在 窗口 中 的 对 齐 方式 ,默认 值 为 left。 

width、height: 表格 的 宽度 和 高 度 。 可 以 使 用 像素 或 窗口 的 百分数 表示 。 

bordercolor、bgcolor、background: 表格 线 颜 色 .表格 背景 颜色 和 表格 背景 图 片 。 表 格 
背景 颜色 和 表格 背景 图 片 与 网 页 背景 色 .背景 图 片 无 关 。 

cellpadding: 单元 格 内 容 周 围 的 空间 间距 。 

cellspacing: 单元 格 之 间 的 间距 。 

有 关 表 格 边框 与 表格 线 的 详细 内 容 可 参阅 HTML 手册 。 

3. <tr> 标 记 属 性 

二 tr 二 属性 是 对 一 行 单元 格 的 设 罗 ,常用 属性 有 : 

过 tr align 二 "水 平 对 齐 方式 " valign 二 "垂直 对 齐 方 式 " height= "nln%" title=“" 提 示 信 息 " nowrap 之 … 

<tr> 

align 二 "left|right|center": 该 行 单元 格 内 容 的 水 平 对 齐 方式 。 默 认 值 是 left。 

valign 二 "top|middle| bottom" : 该 行 单元 格 内 容 的 垂直 对 齐 方式 。 默 认 值 是 middle。 

height: 行 高 。 可 以 用 像素 或 表格 高 度 的 百分数 表示 。 

title: 鼠标 指向 该 行 时 的 提示 信息 。 

nowrap: 本 行 所 有 单元 格 内 容 不 能 自动 换行 。 

4. 过 td 之 .过 th 之 标记 属性 

二 td 请 、 达 th 二 标记 属性 是 对 一 个 单元 格 的 属性 设置 ,常用 的 属性 有 : 


过 td align 二 "水 平 对 齐 方式 " valign 二 "垂直 对 齐 方式 " width 二 "n|n%" height 一 "n|n%" bordercolor 一 
"边框 颜色 " bgcolor= "背景 颜色 " background= "背景 图 片 URL" nowrap rowspan 一 "n" colspan 一 "n" 二 


align、valign: 单元 格 内 容 的 水 平 、 垂 直 对 齐 属性 。 与 二 tr 之 设置 冲突 时 ,以 单元 格 设置 
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为 准 。align 默认 值 是 left,valign 默认 值 是 middle。 

width: 单元 格 宽度 。 可 以 用 像素 或 表格 宽度 的 百分数 表示 。 

height: 单元 格 高 度 。 可 以 用 像素 或 表格 高 度 的 百分数 表示 。 如 果 与 二 tr> 设 置 冲突 
时 ,使 用 较 大 高 度 值 。 

bordercolor: 单元 格 边框 颜色 。 

bgcolor .background: 单元 格 背景 色 .背景 图 片 。 单 元 格 可 以 单独 设置 自己 的 背景 色 或 
背景 图 片 ,与 网 页 .表格 的 背景 色 .背景 图 片 设置 无 关 。 

nowrap: 该 单元 格 内 容 不 能 自动 换行 。 

rowspan 一 "n": 单元 格 所 占 的 行 数 。 

colspan 一 "n" : 单元 格 所 占 的 列 数 。 


5. 合并 单元 格 
如 果 需 要 图 2-15 所 示 的 表格 ,就 需要 使 用 一 td 之 标记 的 rowspan colspan 属性 来 合并 
单元 格 。 
i 使 用 表格 标记 描述 一 个 表格 时 ,一 般 是 分 行 描述 ,每 
2 行 描述 行内 的 单元 格 。 遇 到 需要 合并 单元 格 的 情况 ,在 
描述 表格 时 需要 按照 以 下 规则 。 
a 2 (1) 每 行内 的 单元 格 个 数 是 相同 的 (每 行列 数 相 


图 2-15 合并 表格 单元 格 同 ) ,每 行 单元 格 个 数 不 能 多 也 不 能 少 。 
(2) 如 果 在 一 个 单元 格 内 使 用 了 colspan 王 "2", 表 

示 该 单元 格 占据 了 两 个 单元 格 位 置 , 所 以 需要 少 写 一 个 二 td 二 标记 。colspan 二 "3" 时 就 需 
要 少 写 2 个 二 td 二 标记 ,以 此 类 推 。 

(3) 如 果 在 一 个 单元 格 内 使 用 了 rowspan 二 "2" ,表示 该 单元 格 占据 了 下 一 行 该 列 单元 
格 位 置 , 所 以 在 下 一 行 该 列 不 能 再 有 二 td 二 标记 。colspan 二 "3" 时 下 面 两 行 该 列 就 不 能 青 
有 二 td 二 标记 ,以 此 类 推 。 

根据 以 上 规则 ,图 2-15 所 示 的 表格 描述 应 该 如 下 : 

(1) 表格 为 3 行 4 列 。 

(2) 第 一 行使 用 4 个 二 td 二 标记 ,其 中 第 二 个 二 td 二 标记 使 用 rowspan="2" ,占据 两 行 。 

(3) 第 二 行使 用 2 个 过 td 二 标记 ,其 中 第 二 个 过 td 标记 使 用 colspan 二 "2" ,占据 两 列 。 
加 上 第 一 行 占 用 的 第 二 列 单元 格 , 一 共 4 个 单元 格 。 

(4) 第 三 行使 用 2 个 二 td 二 标记 ,其 中 第 二 个 过 td 二 标记 使 用 colspan="3" ,占据 三 列 ， 
一 共 4 个 单元 格 。 

图 2-15 所 示 的 表格 描述 标记 为 : 

<table border="1" width="300"> 

<tr><td>xl<td rowspan="2">x2<td>x3<td>x4</tr> 


<tr><td>yl <td colspan="2">y3</tr> 
<tr><td>zl<td colspan="3">2z2</tr> 


2.7.2 制作 ' 迁 园 风光 "网 页 


1. 表格 布局 
该 任务 需要 用 HTML 标记 实现 一 个 如 图 2-16 所 示 的 布局 表格 ,在 相应 的 单元 格 内 加 
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入 图 像 标 记 即 可 。 
2. 创建 prac2-4-4. html 文档 
打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 文 多 
件 夹 Myweb 下 的 prac2-4-4. html。 A 
3. 网 页 制作 
在 记事 本 文档 窗口 内 输入 如 下 内 容 : 图 2-16 布局 表格 


<html> 
<head> 
<<title> 校 园 风光 <</title> 
</head> 
<body> 
<table width= "660" border="0" cellspacing= "1" cellpadding= "1" align= "center"> 
<tr> 
<td width="260" rowspan="2"> <img src="images/tp2-4.jpg" ></td> 
<td height="260" colspan="2"><img src 一 "images/tp2-5.jpg" ></td> 
</tr> 
<tr> 
<td width="200"><img src="images/tp2-6.jpg" ></td> 
<td width="200"> <img src="images/tp2-7.jpg" ></td> 
</t> 
</table> 
</body> 
</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-4-4. html, 调 整 Widows 窗口 显示 
尺寸 大 约 为 660X400px 时 ,页 面 显示 效果 如 图 2-17 所 示 。 


200X140px | 200X 140px 


漳 校 周 风 光 - Wicrosoft Internet Erplorer 目 回 园 
文件 到 ) 编辑 如 查看) 收藏 和 ) 工具 中 帮助 凤 
增 址 回 ) 楼 ] it \webx\prac2-4-4. htnl 


2-17 “校园 风光 ”网 页 
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2.8 导航 栏 网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 导航 栏 网 页 prac2-2. html 文档 的 制作 。 页 面 大 小 按 
照 150X400px 制作 ,该 网 页 比较 简单 ,主要 由 4 个 超 链接 构成 ,需要 使 用 超 链接 标记 。 


2.8.1 起 链接 标记 


网 站 是 通过 超 链 接 标 记 链 接 在 一 起 的 一 组 逻辑 上 相关 的 网 页 。 超 链接 标记 在 网 页 中 至 

1. URL 

URL(Universal Resource Locator, 统 一 资源 定位 器 ) 是 表示 Internet 上 资源 的 方法 。 
使 用 URL 标准 ,可 以 表示 Internet 上 任何 一 个 文档 甚至 文档 内 的 某 个 标记 点 。 通 常 可 以 理 
解 为 网 络 信息 资源 地 址 ,URL 的 一 般 格式 为 : 


协议 :// 域 名 (IP 地 址 )[: 端口 ]/ 目 录 / 文 件 名 [# 锚 记 ] 


协议 : 表示 访问 资源 的 种 类 。 常 用 的 有 如 下 几 种 。 

(1) http:// 一 一 超 文本 传输 协议 。 

(2) ftp:// 一 一 文件 传输 协议 。 

(3) mailto: 一 一 电子 邮件 协议 。 

(4) telnet:// 一 一 远程 登录 协议 。 

域名 (IP 地 址 ) : 被 访问 主机 资源 的 地 址 。 

端口 : 服务 器 的 各 种 资源 都 有 默认 的 服务 端口 ,例如 HTTP 协议 使 用 80 端口 ,FTP 协 
议 使 用 21 端口 。 如 果 服 务 器 的 某 种 服务 没有 使 用 默认 服务 端口 ,在 请 求 该 种 服务 时 需要 使 
用 服务 器 公布 的 特定 端口 ,例如 : http://www. yija. com:8080。 

目录 /文件 名 : 被 访问 的 文件 资源 信息 。 在 HTTP 协议 中 省 略 该 部 分 时 表示 请 求 首 页 
文件 。 

# 锚 记 : 被 访问 文件 内 部 的 部 位 标记 ,通常 也 叫 标 签 书签。 使 用 上 锚 记 时 ,需要 该 文 
件 中 有 命名 的 该 锚 记 (书签 ) 。 

在 网 页 文档 内 引用 一 个 文件 时 ,需要 指出 文件 的 路 径 。 这 个 路 径 可 以 是 Internet 资源 ， 
也 可 以 是 本 地 计算 机 系统 上 的 文件 资源 。 

2. 超 链接 标记 格式 

过 a href 二 "URL" [target 二 "_self|_blank|_top|_parent| 框 架 名 "] 志 链接 指针 二 /a 

格式 说 明 如 下 。 

href 属性 : 指示 超 链接 目标 的 地 址 , 超 链接 目标 即 链接 的 对 象 。 

(1) 超 链接 的 类 型 。 超 链接 的 类 型 一 般 有 以 下 3 种 。 

QO 站 外 链接 : 链接 到 其 他 网 站 。 一 般 需要 使 用 从 协议 开始 的 URL 绝对 路 径 , 例 如 链 
接 到 中 央 电视 台 网 站 的 超 链 接 标 记 为 : 


过 a href 二 "http://www.cctv.com" 放 中 央 电 视 台 二 /a 二 
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在 网 页 上 一 种 经 常 使 用 的 超 链接 是 电子 邮件 链接 ,一 般 在 网 页 首页 经 常会 见 到 “联系 我 
们 ”的 超 链 接 标 记 , 该 超 链接 也 是 站 外 链接 ,实现 该 链接 的 标记 为 : 


过 a href 一 "mailto: xxx@yyy.zzz" 联 系 我 们 二 /a 


单 击 该 链接 标记 会 打开 电子 邮件 工具 书写 和 发 送 电子 邮件 。mailto: 后 面 的 电子 邮件 
地 址 自动 进入 收 件 人 地 址 栏 中 。 有 的 网 页 用 “E_mail: youzy@ sohu. com” 方 式 表示 联系 地 
址 ,这 需要 使 用 下 面 标记 实现 ， 


<a href="mailto: youzy@sohu.com "> E_mail:youzy@sohu.com </a> 


@ 站 内 链接 : 链接 到 网 站 内 部 某 个 文件 。 这 是 在 制作 网 站 时 使 用 的 主要 链接 形式 。 
在 制作 网 站 时 ,网 站 是 存放 在 本 地 磁盘 上 一 个 文件 夹 中 的 一 组 文件 。 站 内 链接 实际 就 是 链 
接 本 地 驱动 器 上 的 文件 。 对 于 站 内 链接 ,注意 不 要 使 用 绝对 路 径 ,必须 使 用 相对 路 径 才能 保 
证 网 站 超 链接 的 正确 性 。 例 如 : 


过 a href = 二 "prac2-4.html" 志 我 的 自白 二 /a 二 


链接 到 本 网 页 所 在 目录 中 的 prac2-4. html 网 页 。 
@ 页 内 链接 : 一 般 在 较 长 的 页 面 中 通过 页 内 链接 跳 转 到 指定 的 页 面 位 置 显示 。 页 内 
链接 使 用 ， 


过 a href 一 "# 锚 记 " 之 链接 指针 <</a> 


页 内 链接 需要 事先 使 用 下 面 讲 到 的 命名 锚 记 标记 在 目标 位 置 命名 锚 记 。 

(2) 超 链接 目标 资源 类 型 。 超 链接 目标 资源 可 以 是 各 种 类 型 的 文件 ,如 网 页 文件 ,文本 
文件 , Word 文档 ,Excel 文件 ,图 片 文件 ,声音 文件 ,视频 文件 ,. exe 可 执行 文件 ,. zip, rar 
等 压缩 文件 。 无 论 指 向 什么 文件 ,如 果 浏 览 器 能 处 理 ,那么 浏览 器 就 会 打开 该 文件 。 例 如 ， 
网 页 文件 ,图 片 文件 ,文本 文件 等 就 可 以 在 浏览 器 上 显示 ; 对 于 声音 文件 ,视频 文件 ,浏览 器 
会 使 用 相应 的 播放 器 软件 打开 播放 ; 而 . exe 可 执行 文件 ,. zip、. rar 压缩 文件 等 浏览 器 不 能 
打开 处 理 的 文件 ,浏览 器 会 打开 一 个 文件 下 载 窗 口 提示 下 载 该 文件 。 通 常 在 Web 网 站 上 的 
“点 击 下 载 " 就 是 通过 超 链接 完成 的 。 

target 属性 : 该 属性 指示 链接 目标 在 哪个 窗口 打开 。 默 认 值 是 _self, 即 当前 窗口 ; 如 果 
需要 在 一 个 新 的 窗口 打开 ,需要 使 用 _blank 属性 值 ，_top 和 _parent 表示 在 顶层 和 上 级 窗 
口 打开 。 如 果 本 网 页 是 一 个 框架 结构 ,还 可 以 使 用 框架 名 指示 打开 链接 文件 的 框架 窗口 。 
本 页 面 就 需要 使 用 target 二 "框架 名 ", 由 于 目前 还 没有 生成 框架 集 文件 ,所 以 暂时 先 不 使 
用 target 属性 。 

链接 指针 : 页 面 上 显示 的 超 链接 标记 。 

3. 命名 锚 记 标记 


过 a name 一 " 锚 记 名 "之 </a> 


该 标记 命名 一 个 锚 记 名 称 , 以 便 在 超 链 接 标 记 中 使 用 。 
页 内 链接 最 多 的 用 途 是 制作 文档 内 容 目 录 。 如 果 一 个 文档 的 内 容 有 上 百 行 ,例如 教材 
教案 ,在 这 样 的 网 页 上 寻找 某 个 章节 内 容 很 麻烦 。 可 以 在 网 页 开始 制作 一 个 内 容 目录 。 如 : 
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二 

去 有 目 及 5 二 为 芭 

<<p> 一 、<a href=="#s0">>HTML 的 基本 概念 /a 之/p 二 

过 p 二 、<a href 一 "#sl" 过 HTML 的 头 部 标记 与 主体 标记 二/a 二 二/p 二 
之 p 记 三 ,<a href 一 "#s3" 盖 文本 标记 与 超 链接 标记 <</a 之 忆 p> 

<p> 四 .<a href="#s4" 之 图 像 标 记 <</a><</p> 

<<p> 五 `<a href 王 "#s5" 之 表格 标记 <</a>><</p> 

<<p>> 六 <a href="#s6" 过 框架 <</a>><</p>> 

<<p> 七 .<a href 一 "#s7" 过 其 他 标记 </a 之 一 /p> 

过 p 二 八 .<a href 一 "#s8" 过 样式 表 CSS<</a><</p> 


在 每 一 节 内 容 的 开始 命名 相应 的 锚 记 名 称 ,例如 在 “图 像 标记 ”一 节 开 始 加 上 : 
一 p>><a name="s4" 过 <</a> 四 、 图 像 标 记 </p> 

或 者 
过 p><a name 一 "s4" 之 四 、 图 像 标 记 </a 之 <</p> 


两 种 方式 都 是 命名 了 s4 锚 记 名 ,对 “四 、 图 像 标记 ”文字 不 影响 。 这 样 ,网 页 中 的 目录 和 
单 击 “图 像 标 记 ” 超 链接 时 的 显示 如 图 2-18 所 示 。 


一 、HTML 的 基本 概念 


二 、HTML 的 头 部 标记 与 主体 三 
三 、 文 本 标记 与 超 链接 标记 1 图 像 的 标记 
四 、 图 像 标 记 <img src=" 图 片 文件 "> 
五 、 表 格 标记 2. 图 像 标 记 属 性 
1) ALT=" 替 代 文 本 " 
2) 图 像 的 大 小 : width="n" 
height="m" 
3) 图 像 边框 :border="n" 


图 2-18 页 内 超 链接 


在 超 链 接 中 如 果 使 用 : 
<a href="#">xxxx</a> 


表示 该 链接 指向 本 页 面 的 开始 ,一 般 称 作 空 链接 。 
4. 图 像 超 链接 
在 超 链 接 标记 中 也 可 以 使 用 图 片 作 为 超 链接 指针 ,例如 : 
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<a href=http://www. sohu. com> <img src= "images\sohu logo. gif"></a> 


超 链 接 的 指针 就 是 “sohu_logo. gif” 图 片 , 单 击 该 图 片 时 就 会 链接 到 搜狐 网 站 。 在 使 
图 片 作 超 链接 指针 时 ,系统 会 自动 为 图 片 加 上 边框 ,用 于 指示 这 是 一 个 超 链接 。 该 超 链接 显 
示 效 果 如 图 2-19 所 示 。 


o microsoft Internet Eglo -lolxl 
| 文件 四 纺 各 如 可 看 如 收 总 @) I 具 I ”| 鄞 
] 昌 撒 -日 - 国 回 的 | 记 扣 i 


| 是正 画 癌 下 icewnleyce hm 了 >] 加 痢 


= 


略称 | 站 [本 5 | 


2-19 图 像 超 链接 


图 片 也 可 以 和 文字 一 起 作为 超 链 接 指针 , 即 单 击 文字 或 单 击 图 片 都 能 链接 到 目标 对 
象 ,如 : 


<a href=http://www. sohu. com> <img src="images\sohu_logo. gif"> 搜 狐 二 /a 二 


2.8.2 导航 栏 网 页 制作 


1. 创建 prac2-2. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 E:\Myweb 目录 下 的 prac2-2. html。 
2. 网 页 制作 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

二 title 二 导航 栏 三 /title 二 

</head> 

<body topmargin="100"> 

<center> 

<font size="4"> 

二 p 二 过 a href=="prac2-4-1.html" 过 > 我 的 自白 之 /a 二 </p 二 
二 p 记 过 a href=="prac2-4-2.html" 这 石 邮 校 训 过 /a 二 <</p 二 
一 p 二 一 a href 一 "prac2-4-3.html" 才学 院 简 介 二 /a 二 过/p 二 
过 p< 过 a href 二 "prac2-4-4.html" 之 校园 风光 <</a> 志 /p> 
过 p 记 过 a href 二 "index. html" 之 返回 首页 一/a> 二 /p> 
</font> 

</center> 

</body> 

</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-2. html, 调 整 Widows 窗口 显示 
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尺寸 大 约 为 150X400px 时 ,页 面 显示 效果 如 图 2-20 所 示 。 单 击 其 中 的 超 链接 文本 ,可 以 打 
开 相 应 的 页 面 , 但 都 是 在 该 窗口 中 打开 。 使 用 浏览 器 工具 栏 中 的 “后 退 ” 按 钮 可 以 退回 到 本 
页 面 显示 。 通 过 “返回 首页 超 链 接 返回 网 站 首页 。 


图 2-20 导航 栏 页 面 


2.9 版 权 页 面 制作 


该 任务 完成 HTML 标记 栏目 中 的 版 权 网 页 prac2-5. html 文档 的 制作 。 页 面 大 小 按照 
960X50px 制作 ,该 网 页 需要 使 用 电子 邮件 链接 超 链接 。 网 页 中 的 背景 图 片 使 用 素材 图 片 
images\tp1-9. jpg。 

1. 创建 prac2-5. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-5. html。 

2. 网 页 制作 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

<<title> 版 权 <</title> 

</head> 

body background= "images/tp1-9.jpg"> 

<p align= "center"> 

<font color= "blue" size="2"> 

版 权 所 有 石家庄 邮电 职业 技术 学 院 计 1236 班 孙 小 丫 br 二 
和 我 联系 :a href 二 "mailto: wangcx@163.com">yaya@163.com<</a></font></p> 
</body> 

</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-5. html, 调 整 Widows 窗口 显示 
尺寸 大 约 为 960X50px 时 ,页 面 显示 效果 如 图 2-21 所 示 。 
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当 版 权 - icrosoft Internet Explorer 
i 文件 四 编 丢 到 查看 中” 收 总 包 工具 OD。 帮助 如 
地 址 四 ) | 加 ic vebxvprac2-5 hal 


版 权 所 有 石家庄 邮电 职业 技术 学 院 计 12363F 孙 小 丫 
和 我 联系 :yaya8163. con 


2-21 版 权 网 页 


2.10 滚动 超 链 接 页 面 制作 


该 任务 完成 HTML 标记 栏目 中 的 滚动 超 链接 网 页 prac2-3. html 文档 的 制作 。 页 面 大 
小 按照 150X400px 制作 。 该 网 页 虽然 也 是 超 链 接 ,但 是 由 于 超 链接 的 内 容 比 较 多 ,所 以 超 
链接 内 容 通过 滚动 显示 出 来 ,而且 要 求 在 鼠标 停 在 该 页 面 上 面 时 ,滚动 停止 ; 鼠标 离开 后 继 
续 滚动 。 制 作 该 网 页 需要 使 用 文本 移动 标记 和 一 点 超出 HTML 标记 的 JavaScript 脚本 。 


2.10.1 文本 移动 标记 
文本 移动 标记 完成 指定 文字 在 页 面 上 的 滚动 效果 。 标 记 格式 为 : 


marquee [direction 一 "down| up |left | right”behavior 一 "scroll | slide | alternate” loop="n|-1" 
scrollamount="n" width 一 "n" height="n"] > 

移动 文字 

</marquee> 

具体 介绍 如 下 。 

direction: 滚动 方向 。 默 认 值 为 left。 

behavior: 滚动 方式 。scroll( 循 环 , 默 认 ) \slide( 一 次 ) ,alternate( 来 回 ) 。 
loop: 滚动 次 数 ,默认 值 为 一 1( 循 环 ) 。 

scrollamount: 滚动 速度 ,单位 为 px/s, 默 认 5px/s。 

width ,height: 滚动 区 域 ( 像 素 ) 。 

滚动 文字 可 以 是 多 行 。 


2.10.2 制作 滚动 起 链接 页 面 


1. 创建 prac2-3. html 文档 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-3. html。 
2. 网 页 制作 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 


<html> 

<head> 

<<title> 滚 动 超 链接 <</title> 

</head> 

<body> 

< 一 p 二 忆 font size 一 "4" face 一 "黑体 "color= "blue" 二 我 的 专业 课程 一 /font 之 一/p> 
所 marquee direction= up height= 300 scrollamount=1 > 

<p> 
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二 a href 二 "prac2-3-1.html" 之 静态 网 站 制作 一 /a> 
过 p> 过 a href=="#" 之 微机 组 装 维护 <</a> 
一 p>> a href="#" 之 C 语言 程序 设计 一 /a> 


<<p> <<a href=="#" 二 数据库 技术 <</a> 
一 p>> a href=="#" 二 计算 机 网 络 一 /a> 
< 一 p>> a href 王 "#" 二 Java 程序 设计 一 /a> 
<<p>> <<a href 一 "#" 之 Jsp 动态 网 站 技术 二 /a 二 
<p> <a href="#" >ASP.NET</a> 
过 p> 二 a href="#" 网 络 集成 技术 二 /a 二 态 网 站 
<<p> a href="#" 网 络 安 全 技术 二 /a 二 
/marquee> 找 机 组 装 维 护 
</body> C 语 言 程序 设计 
一 /html> 人 
在 超 链接 标记 中 除了 “静态 网 站 制作 ”链接 到 了 prac2-3-1. 计算 机 网 络 
html 之 外 ,其 他 超 链接 的 href 属性 值 为 "#", 即 “ 空 链接 ”, 表 ava 程 序 设计 
示 该 网 页 还 没有 制作 完成 。 Jsp 动 态 网 站 技术 
保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-3. ASP. NET 是 
html ,调整 Windows 窗口 显示 尺寸 大 约 为 150 X400px 时 ,页 
面 显 示 效果 如 图 2-22 所 示 。 图 2-22 滚动 超 链 接 页 面 


2.10.3 添加 鼠标 悬 停 效果 
使 用 下 面 的 过 marquee 之 标记 可 以 实现 鼠标 在 文字 滚动 区 域 上 的 悬 停 ; 


所 marquee height="n" width 一 "m" onMouseover= "this. stop()" onMouseOut= "this. start()" 
scrollAmount=n> 


</marquee> 


onMouseover 一 "this. stop()”onMouseOut= "this. start()" 是 JavaScript 脚本 ,本 教材 
中 虽然 经 常 使 用 JavaScript 脚本 ,但 是 并 不 介绍 JavaScript 脚本 的 知识 ,读者 如 果 想 更 多 
地 了 解 JavaScript 脚本 ,需要 参考 其 他 教科 书 。 这 里 只 需要 按照 给 出 的 格式 正确 书写 
即 可 。 

给 滚动 超 链接 网 页 增加 了 鼠标 悬 停 功 能 的 网 页 代码 如 下 


<html> 
<head> 
<title> 滚 动 超 链接 </title> 
</head> 
<body> 
过 p 记 过 font size 一 "4" face 一 "黑体 " color 二 "blue"> 我 的 专业 课程 过 /font 过 /p 二 
marquee direction= up height= 300 scrollamount= 1 onMouseover= "this. stop()" onMouseOut= 
"this. start()" > 
<p> 
二 a href 二 "pracl-32. html" 二 静态 网 站 制作 过 /a 二 
过 p> 二 a href 二 "#" 之 微机 组 装 维护 <</a> 
过 p>> a href="#" 之 C 语言 程序 设计 一 /a> 
二 p a href="#" 数据 库 技术 二 /a 二 
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<<p>> 过 a href="#" 放 计 算 机 网 络 二 /a 二 
过 p> a href=="#" 二 Java 程序 设计 一 /a> 
二 p>> <<a href="#" 之 Jsp 动态 网 站 技术 二 /a 二 
<p> <a href="#" >ASP.NET</a> 
< 一 p>> a href 王 " 井 "二 网 络 集成 技术 一/a> 
过 p> a href 二 "#" 二 网 络 安全 技术 二 /a 二 
/marquee> 
</body> 
</html> 


2.11 “静态 网 站 制作 ”网 页 制作 


该 任务 完成 HTML 标记 栏目 中 的 “静态 网 站 制作 ”网 页 prac2-3-1. html 文档 的 制作 。 
该 网 页 中 包含 表格 布局 .背景 音乐 .过 渡 效果 和 单 击 下 载 超 链接 内 容 , 网 页 中 使 用 图 片 素材 
为 images\tp2-8. jpg。 


2.11.1 篆 景 音乐 与 过 渡 效 果 


1. 背景 音乐 
网 页 中 的 背景 音乐 可 以 使 用 以 下 两 种 标记 实现 。 
(1) 多 媒体 标记 。 多 媒体 标记 用 于 在 页 面 中 插入 音乐 ,视频 、 动 画 等 ,标记 格式 为 ; 


二 embed src 二 "多 媒体 文件 "[ width="n" height=="n" autostart= "true|false"] 之 


在 较 高 的 I 正版 本 中 , 当 不 使 用 width、height 属性 或 属性 值 为 0 时 ,如 果 多 媒体 文件 是 
音乐 文件 ,就 可 以 实现 背景 音乐 播放 ,但 autostart 属性 必须 为 true。 如 果 width、height 属 
性 值 不 为 0, 页 面 上 将 显示 媒体 播放 器 ,可 以 通过 按钮 控制 播放 。 在 较 低 的 下 版 本 中 ,不 使 
用 width、height 属性 时 会 按 播放 器 的 大 小 显示 播放 器 ,并 且 总 是 自动 播放 。 

(2) 背景 音乐 标记 。 标 记 格式 为 ; 


过 bgsound src 一 "声音 文件 " [loop 二 "n"] > 


该 标记 用 于 设置 背景 音乐 ,类 似 志 embed> 标 记 不 使 用 width、height 属性 或 属性 值 为 
0 的 情况 ,但 该 标记 需要 在 头 部 使 用 ,打开 页 面 时 自动 播放 ,默认 播放 一 遍 。 如 果 需 要 循环 
播放 ,可 以 设置 loop 属性 为 一 1。 

2. 网 页 过 渡 效 果 

使 用 网 页 过 渡 效 果 可 以 实现 在 打开 或 关闭 网 页 时 的 动态 效果 。 网 页 过 渡 效 果 通 过 头 部 
二 meta 二 标记 实现 ,标记 格式 为 : 


meta http-equiv= "page-enter| page-exit" content= "revealtrans(duration=n, transition=n)"> 


page-enter 用 于 指示 网 页 打开 时 的 过 渡 效 果 ; page-exit 用 于 指示 网 页 关闭 时 的 过 渡 
效果 。 

duration: 过 渡 动 作 时 间 。 单 位 : 秒 。 

transition: 效果 类 型 。 取 值 0 一 23。 
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网 页 过 渡 类 型 说 明 见 表 2-3。 
表 2-3 网 页 过 渡 类 型 


向 上 擦 除 10 | 横向 棋盘 式 16 | 中 央 向 上 下 扩展 | 22 | 垂直 水 平 线条 


值 过 度 效 果 值 过 度 效 果 值 过 度 效 果 值 过 度 效 果 
0 盒 状 收缩 6 向 右 擦 除 12 | 随机 分 解 18 | 从 左上 抽出 

1 盒 状 放射 7 向 左 擦 除 13 | 左右 向 中 央 收 缩 | 19 | 从 右 下 抽出 
2 圆 形 收缩 8 垂直 遮蔽 14 | 中 央 向 左右 扩展 | 20 | 从 右上 抽出 

3 圆 形 放射 9 水 平 遮蔽 15 | 上 下 向 中 央 收 缩 | 21 | 随机 水 平 线条 
4 

5 


向 下 擦 除 11 纵向 棋盘 式 17 | 从 左下 抽出 23 | 随机 


2.11.2 制作 知 态 网 站 制作 " 网 页 


1. 素材 准备 
在 本 地 站 点 目录 中 创建 一 个 文件 夹 waves, 从 Internet 上 下 载 一 个 MP3 音乐 文件 存放 


到 waves 文 件 夹 中 ,文件 重 命 名 为 yy. mp3; 使 用 文件 压缩 工具 将 声音 文件 压缩 为 
yy. rar, 将 压缩 文件 存放 在 waves 文件 夹 中 。 


2. 创建 prac2-3-1. html 文档 
打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2-3-1. html。 
3. 网 页 制作 


在 记事 本 文档 窗口 内 输入 如 下 内 容 : 
<html> 

<head> 

过 title 二 静态 网 站 制作 过 /title 二 


meta http-equiv= "page-enter" content= "revealtrans( duration= 3, transition= 23)"> 
<bgsound src="waves/yy. mp3" loop="-1"> 
</head> 
<body> 
<table width= "660" border="0"> 
二 好 
<td height 一 "40" colspan= "2" align 一 "center" 之 一 font face 一 "华文 彩云 "size 一 "6"”color 一 
# 003300> 静 态 网 站 制作 二/font><</td> 
</tr> 
<tr> 
<td width="233" rowspan="3"> <img src="images/tp2-8. jpg" width="260" height= 
"307" 盖 <</td> 
td width="457" height 一 "44" align 一 "center" 之 一 font face 一 "黑体 "size 一 "4" 过 课程 内 容 
介绍 </font></div></td>> 
</tr> 
<tr> 
<td height="147"> &nbsp; &nbsp; &nbsp; 
过 font size 一 "3" 之 这 是 一 门 学 习 静 态 网 站 制作 技能 的 课程 .该 课程 根据 一 个 设计 好 的 网 站 项 目 ,通过 
完成 网 站 项 目 中 的 各 个 工作 任务 ,学习 HTML 标记 和 CSS 样式 表 的 使 用 ; 学 习 使 用 可 视 化 网 页 编辑 
工具 制作 网 页 ; 学 习 使 用 图 像 处 理工 具 编辑 网 页 中 的 图 像 ,制作 Gif 动画 和 制作 网 页 ; 学 习 使 用 网 页 
动画 制作 工具 制作 Flash 动画 . </font> 
=p 之 过 font size 一 "3" 之 &nbsp; &nbsp; &nbsp; &nbsp; 在 今天 的 计算 机 网 络 世 界 中 ,网 
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站 是 信息 传播 的 主要 手段 .作为 现代 知识 分 子 ,网 页 制作 技术 在 工作 和 生活 中 都 是 必 不 可 少 的 .网 站 
是 计算 机 网 络 上 的 最 基本 的 应 用 ,也 是 计算 机 技术 的 基本 应 用 .二 /font> 雪 /p> 雪 /td> 

</tr> 

SH 

td height="43" 二 一 div align 一 "center" 二 一 a href 一 "waves/yy.rar" 二 背景 音乐 下 载 一 /a> 

</div></td> 

</t> 
</table> 
</body> 
</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2-3-1. html, 调 整 Widows 窗口 显示 
尺寸 大 约 为 660X400px 时 ,页 面 显示 效果 如 图 2-23 所 示 。 
副 网 页 制作 工具 - icrosoft Internet Erplorer 


i 文件 妈 。 钨 各 加 ”查看 WW) 收藏 和 ) 工具 GD) 帮助 0 
地 址 @@) | 本 Wwebz\prsc2-3-1. hinl 


项 六 网 站 制作 


课程 内 容 介绍 


这 一 站 3 有 让 站 制作 扶 能 的 课程， 计 当 机 
> 计 好 的 网 站 项 成 网 站 项 目 中 的 
) 工作 任务 ， Ri 
编辑 工具 制作 网 页 ， 学 习 使 用 图 
编辑 网 页 中 的 图 像 、 制 作 Gi 动 桓 和 制作 网 页 ， 学习 


使 用 网 页 动画 制作 工具 制作 Flash 动 画 。 


静态 网 站 制作 
在 今天 的 计算 机 网 络 世界 中 ， 网 站 是 信息 传播 的 主 
要 手段 ， 作 为 现代 知识 分 子 ， 网 页 制作 技术 在 工作 和 生 
活 中 都 是 必 不 可 少 的 。 网 站 是 计算 机 网 络 上 的 最 基本 的 
应 用 ， 也 是 计算 机 技术 的 基本 应 用 。 


前 景 音乐 f 载 


2-23 “静态 网 站 制作 ”网 页 


在 打开 该 网 页 后 ,将 循环 播放 waves 目录 中 的 yy. mp3 音乐 。 但 是 在 打开 单个 网 页 时 ， 
网 页 过 渡 效 果 一 般 显 示 不 出 来 ,在 网 页 超 链 接 打开 时 就 会 看 到 网 页 过 渡 效 果 。 单 击 “背景 音 
乐 下 载 ? 超 链接 时 ,会 弹出 如 图 2-6 所 示 的 “文件 下 载 " 对 话 框 。 


2.12 制作 框架 集 以 及 组 合 网 页 
该 任务 完成 HTML 标记 栏目 中 的 栏目 首页 prac2. html 文档 的 制作 。 该 栏目 采用 框架 
结构 ,其 他 页 面 都 要 组 合 在 框架 中 ,所 以 本 任务 完成 该 栏目 的 最 终 制作 。 
2.12.1 框架 标记 


1. 框架 页 面 布局 
框架 是 一 种 页 面 布局 结构 。 在 一 个 浏览 器 窗口 中 如 果 需 要 显示 多 个 网 页 ,就 必须 使 
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框架 页 面 结构 。 例 如 聊天 室 网 页 ,对 方 信息 显示 和 发 言 窗口 是 两 个 网 页 ,而 它们 必须 同时 显 
示 在 同一 个 浏览 器 窗口 中 ,所 以 必须 使 用 框架 页 面 。 
2. 基本 框架 
框架 页 面 的 标记 描述 为 : 
<html> 
<head> 
</head> 
<frameset rows= "nl,n2,n3"> 
<frame src 一 "URL1" name= "topFrame"> 
<frame src="URL2" name="mFrame"> 
<frame src="URL3" name="bFrame"> 
</frameset> 
</html> 


这 是 一 个 将 浏览 器 窗口 横向 划分 成 3 个 框架 的 描述 。 该 页 面 也 称 作 框架 集 ， 
二 frameset 记 标记 描述 框架 集 ,每 个 二 frame 二 标记 描述 一 个 框架 。 这 个 框架 集中 有 3 个 框 
架 , 名 称 分 别 为 topFrame、mFrame 和 bFrame。 框 架 名 可 以 省 略 , 但 如 果 在 超 链 接 标记 中 需 
要 指定 打开 的 页 面 在 哪个 框架 中 显示 ,就 需要 使 用 target= "框架 名 "表达 ,这 时 若 省 略 框架 
名 就 无 法 做 到 了 。3 个 框架 中 打开 的 网 页 文件 分 别 为 URL1、URL2、URL3, 高 度 分 别 为 
nl.n2、n3。 

框架 的 高 度 表示 可 以 使 用 像素 ,浏览 器 窗口 百分数 和 x 号。 例如 rows 二 "100,50%, x"， 
表示 第 一 个 框架 高 度 为 100px, 第 二 个 框架 高 度 占 浏览 器 窗口 的 50% ,其 余 的 是 第 三 个 框架 
的 高 度 。 如 果 三 部 分 都 使 用 * 号 ,表示 三 等 分 窗口 。 

注意 : 框架 集 页 面 文档 中 不 使 用 二 body 二 标记 。 

如 果 将 二 frameset 二 中 的 rows 换 成 cols, 即 


<frameset cols= "nl,n2,n3"> 


那 就 是 将 浏览 器 窗口 纵向 划分 成 3 个 框架 。 一 般 志 frameset 二 中 的 rows、cols 属性 不 同时 
使 用 。rows、cols 属性 中 将 浏览 器 窗口 划分 成 了 几 部 分 ,框架 集中 就 必须 有 几 个 二 frame 二 
标记 。 

3. 框架 嵌 套 

如 果 需 要 既 有 横向 框架 又 有 纵向 框架 的 框架 页 面 , 那 么 就 需要 使 用 框架 拭 套 ,例如 


<html> 
<head> 
</head> 
<frameset rows= "80, * "> 
<frame src="URL1" > 
<frameset cols="20%,*"> 
<frame src="URL2> 
<frame src="URL3" > 
</frameset> 
< /frameset> 
</html> 
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4. 框架 标记 属性 

框架 标记 过 frame> 常 用 的 属性 如 下 : 

src 一 "URL "一 一 框架 页 面 文件 路 径 。 该 属性 不 能 省 略 。 

frameborder 二 "0|1" 一 一 是 否 显示 框架 边框 。 

spacing 一 "n" 一 一 边框 宽度 。 

scrolling 王 "yes|nol auto" 一 一 是 否 显示 滚动 条 。 默 认为 auto。 

name 一 "框架 名 "一 一 在 超 链接 中 需要 在 该 框架 中 显示 时 必须 指定 ,而 且 与 大 小 写 有 关 。 


2.12.2 栏目 首页 制作 


1. 创建 prac2. html 文档 
打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 目录 下 的 prac2. html。 


2. 网 页 制作 

在 记事 本 文档 窗口 内 输入 如 下 内 容 : 
<head> 

过 title>HTML 网 页 制作 </title> 
</head> 


<frameset rows="160, * ,50" border="0" > 
<frame src= "prac2-1.html"> 
<frameset cols="150,660,150" border="0" scroll="no"> 
<frame src="prac2-2. html" scrolling= "no"> 
<frame src= "prac2-4-1. html" name= "mainFrame" scrolling= "no"> 
<frame src= "prac2-3. html" scrolling= "no"> 
</frameset> 
<frame src= "prac2-5. html" scrolling= "no"> 
</frameset> 
</body> 
</html> 


保存 文件 ,在 Windows 资源 管理 器 窗口 中 双击 prac2. html, 调 整 Widows 窗口 显示 尺 
寸 大 约 为 960X 620px 时 ,就 会 显示 出 如 图 2-1 所 示 的 页 面 效 果 ( 注 意 将 浏览 器 的 显示 “文字 
大 小 ?设置 为 "中 ”) 。 

但 是 ,这 时 如 果 单 击 导 航 栏 中 的 超 链接 或 滚动 超 链接 中 的 “静态 网 站 制作 >, 打开 的 链接 
页 面 不 会 显示 在 预定 的 主 框架 中 。 


2.12.3 组 合 框架 页 面 


为 了 实现 预期 的 页 面 效 果 , 需 要 对 导航 栏 页 面 和 滚动 超 链接 页 面 进行 改造 。 

使 用 Windows 记事 本 打开 本 地 站 点 目录 下 的 prac2-2. html 文件 ,在 超 链 接 标记 中 添加 
target 二 "mainFrame" 属 性 (注意 字母 的 大 小 写 )。 由 于 “返回 首页 ” 超 链接 需要 打开 网 站 首 
页 ,所 以 target 属性 需要 使 用 *_parent” 或 ”top”、“_blank”。 改 造 结果 如 下 : 

<html> 


<head> 
<title> 导 航 栏 </title> 
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</head> 

body topmargin= "100"> 
<center> 

<font size="4"> 


一 p 二 一 a href 二 "prac2-4-1. html" target 一 "mainFrame" 过 我 的 自白 一 /a> 一 /p> 
<p><a href="prac2-4-2. html" target 一 "mainFrame" 过 石 邮 校 训 一 /a 之 一 /p> 
< 一 p 二 一 a href 王 "prac2-4-3.html" target 一 "mainFrame" 过 学院 简 介 一 /a> 一 /p> 
p><a href="prac2-4-4. html" target 一 "mainFrame" 过 校园 风光 一 /a> 王 /p> 
二 p 记 过 a href 王 "index.html" target 一 "_parent" 过 返回 首页 一 /a> 二 /p> 


</font> 
</center> 
</body> 
</html> 


保存 文件 ,再 打开 本 地 站 点 目录 下 的 prac2-3. html 文件 ,在 “静态 网 站 制作 ” 超 链 接 标 


记 中 添加 target 二 "mainFrame" 属 性 ,保存 文件 。 


打开 网 站 首页 文件 ( 见 图 1-2), 单 击 网 站 首页 文件 中 的 “HTML 标记 ”导航 按钮 打开 
HTML 标记 栏目 首页 ( 见 图 2-1) , 单 击 HTML 标记 栏目 导航 栏 中 的 各 个 超 链 接 按 钮 可 以 
看 到 2. 1. 1 小 节 设 计 的 各 个 页 面 效 果 ; 在 滚动 超 链接 中 页 面 中 可 以 测试 鼠标 悬 停 效果 , 单 
击 “ 网 页 制作 工具 ” 超 链接 可 以 看 到 随机 的 网 页 过 渡 效 果 , 如 图 2-24 所 示 。 


各 HT 了 LL 网 页 制作 - Wicrosoft Internet Explorer 
文件 如 讽 钼 @) 查看 W) 收藏 和 工具 I) 帮助 如 
地 站 风 | 办] kr wwebx\prwe2 htnl 


制作 
课程 内 容 介绍 


一 门 学 习 租 态 网 站 制作 技能 的 课程 。 该 课程 根 
据 一 站 1 通过 完成 网 站 项 目 中 的 各 个 
工作 任务 ， 学 习 HTIL 标 记 和 CSS 样 式 认 的 使 用 ， 学 习 
te 
的 图 像 、 制 作 ci 5 动画 和 制作 网 页 ， 


辑 网 页 中 
和 1ash 动 画 。 


在 今天 的 计算 机 网 络 世界 中 ， 网 站 : 
要 手段 。 作 为 现代 知识 分 子 ， 网 页 制作 
活 中 都 是 必 不 可 少 的 。 网 站 是 计算 
应 用 ， 也 是 计算 机 技术 的 基本 应 


静态 网 站 制作 


版 权 所 有 石家庄 邮电 最 业 技术 学 院 计 1236 班 孙 小 站 
和 我 联系 :yaya8163. con 


| ie /Nfwebs/pr oc2-3-1, htnl 


图 2-24 网 页 过 渡 效 果 


打开 “网 页 制作 工具 ”网 页 后 ,如 果 计算 机 有 音响 设备 ,可 以 听 到 背景 音乐 。 
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2.13 小 结 


本 章 使 用 HTML 标记 制作 完成 了 网 页 制作 实 训 网 站 中 的 HTML 标记 栏目 的 制作 。 
使 用 HTML 标记 制作 网 页 看 起 来 比较 繁琐 ,其 实在 掌握 了 使 用 HTML 标记 制作 网 页 技术 
后 ,学 习 使 用 其 他 工具 制作 网 页 就 非常 简单 。 其 他 网 页 制作 工具 实际 上 就 是 帮助 用 户 生成 
HTML 标记 ,当然 还 有 一 些 其 他 功能 ,但 是 毕竟 使 用 工具 生成 代码 是 由 程序 实现 的 ,所 以 总 
是 难免 有 无 法 实现 的 功能 ,所 以 使 用 HTML 代码 就 能 解决 一 些 工 具 不 能 实现 的 功能 。 总 
之 掌握 了 HTML 标记 使 用 就 掌握 了 网 页 制作 技术 的 根本 。 


2.14 习 题 


. HTML 标记 是 否 区 分 大 小 写字 母 ? 什么 地 方 区 分 ? 
. 设置 颜色 值 可 以 有 哪些 格式 ? 

. 头 部 标记 和 正文 标记 有 什么 区 别 ? 

. 什么 是 文档 的 可 发 布 性 与 可 移植 性 ? 如何 做 到 ? 

.如 何 设置 页 面 背 景 ? 

. 在 超 链接 标记 中 ,为 什么 要 使 用 相对 路 径 ? 

. 怎样 设置 图 像 在 页 面 中 的 大 小 ? 

. 图 像 的 对 齐 属 性 和 图 文 混 排 有 什么 区 别 ? 

. 框架 名 有 什么 用 途 ? 如何 保存 框架 文档 ? 

10. 二 embed 记 标记 和 二 bgsound 二 标记 有 什么 异同 ? 


2.15 实 训 :“ 我 的 大 学 ”主题 网 站 制作 


1. 实 训 目的 

熟悉 HTML 标记 ,练习 使 用 HTML 标记 制作 网 页 。 

2. 实 训 任务 与 实 训 指导 

按照 教学 项 目 网 站 中 “HTML 标记 "栏目 设计 ,以 “我 的 大 学 "为 主题 ,完成 下 列 各 个 实 
训 任 务 及 网 站 发 布 。 


实 训 任务 2-1; 我 的 自白 "页 面 制作 


使 用 自己 的 信息 制作 实 训 网 站 项 目 中 “我 的 自白 ”网 页 prac2-4-1. html; 训练 页 面 排版 
标记 的 使 用 。 

(1) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-4-1. html 网 页 文件 。 

(2) 参照 2. 3. 2 小 节 内 容 输入 HTML 标记 及 页 面 文 本 内 容 , 其 中 文字 内 容 可 以 自己 编 
写 , 页 面 格式 要 按照 设计 制作 。 在 书写 标记 时 需要 注意 如 下 几 点 。 

中 标记 要 书写 正确 ,单词 不 要 拼 错 。 

@ 不 要 丢掉 双 标记 的 结束 标记 ,注意 结束 标记 中 的 “/”。 


R= 
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@ 注意 嵌 套 的 标记 不 要 出 现 交叉 。 

@ 注意 使 用 双 引 号 时 要 成 对 出 现 ,不 能 使 用 汉字 状态 或 全 角 状 态 的 双 引 号 。 

@ 注意 空格 一 二 特殊 字符 的 输入 方式 及 格式 。 特 殊 字符 输入 格式 中 的 分 号 不 能 少 。 

(3) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 ( 浏 览 器 窗口 调整 到 660 xX 
400px) 。 

(4) 使 用 FTP 工具 将 prac2-4-1. html 文件 上 传 到 Web 服务 器 网 站 根 目录 下 。 在 本 地 
浏览 器 地 址 栏 输 入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-4-1. html 


检查 网 站 发 布 是 否 正确 。 
(5) 保存 本 地 站 点 。 


实 训 任务 2-2， 栏目 标题 页 面 制作 


使 用 自 备 图 片 制 作 实 训 网 站 项 目 “ 我 的 大 学 "栏目 标题 网 页 prac2-1. html; 训练 body> 
标记 属性 设置 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 学 院 图 片 . tp2-1.jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-1. html 网 页 文件 。 

(3) 参照 2.4.2 小 节 内 容 输 入 HTML 标记 及 页 面 文本 内 容 。 

(4) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac2-1. html 上 传 到 Web 服务 器 网 站 根 目 录 下 ,将 图 片 tp2-1. jpg 
上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-1. html 


检查 网 站 发 布 是 否 正 确 。 
(6) 保存 本 地 站 点 。 


实 训 任务 2-3: 六 训 "页 面 制作 


使 用 自 备 图 片 制 作 实 训 网 站 项 目 中 “校训 ”网 页 prac2-4-2. html; 训练 一 img 之 标记 的 
使 用 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 学 院 “校训 ”图 片 : tp2-2. jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-4-2. html 网 页 文件 。 

(3) 参照 2. 5. 2 小 节 内 容 输入 HTML 标记 及 页 面 文本 内 容 , 注 意 王 img 之 标记 中 要 使 
用 width height 属性 指定 图 片 显示 的 大 小 。 

(4) 在 本 地 浏览 网 页 ,查看 页 面 显 示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac2-4-2. html 上 传 到 Web 服务 器 网 站 根 目 录 下 ,将 图 片 
tp2-2. jpg 上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-4-2. html 


检查 网 站 发 布 是 否 正 确 。 
(6) 保存 本 地 站 点 。 
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实 训 任务 2-4: 学 院 简 介 " 页 面 制 作 


使 用 自 备 图 片 和 学 院 信息 制作 实 训 网 站 项 目 中 * 学 院 简介 ”网 页 prac2-4-3. html; 训练 
网 页 图 文 混 排 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 学 院 图 片 : tp2-3. jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-4-3. html 网 页 文件 。 

(3) 参照 2.6 节 内 容 输入 HTML 标记 及 页 面 文 本 内 容 。 学 院 介 绍 的 内 容 要 根据 学 院 
的 情况 组 织 。 注 意 使 用 二 img 二 标记 的 width、height 属性 控制 图 片 的 大 小 ,实现 图 文 混 排 。 

(4) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac2-4-3. html 上 传 到 Web 服务 器 网 站 根 目录 下 ,将 图 片 tp2-3. jpg 
上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-4-3. html 


检查 网 站 发 布 是 否 正 确 。 
(6) 保存 本 地 站 点 。 


实 训 任务 2-5: 六 园 风光 "页 面 制 作 


使 用 自 备 图 片 制 作 实 训 网 站 项 目 中 “校园 风光 ”网 页 prac2-4-4. html; 训练 网 页 表格 
布局 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 4 张 学 院 图 片 : tp2-4. jpg、tp2-5. jpg、tp2-6. jpg、 
tp2-7.jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-4-4. html 网 页 文件 。 

(3) 参照 2. 7. 2 小 节 内 容 输 入 HTML 标记 及 页 面 文 本 内 容 。 注 意 单元 格 的 合并 ,每 个 
图 片 都 需要 使 用 width、height 属性 指定 图 片 的 显示 大 小 。 

(4) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac2-4-4. html 上 传 到 Web 服务 器 网 站 根 目 录 下 ,将 图 片 
tp2-4. jpg、tp2-5. jpg、tp2-6. jpg、tp2-7. jpg 上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 在 本 
地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-4-4. html 


检查 网 站 发 布 是 否 正 确 。 
(6) 保存 本 地 站 点 。 


实 训 任 务 2-6:; 导航 页 面 制作 


制作 实 训 网 站 项 目 中 导航 页 面 prac2-2. html 网 页 文件 ; 训练 超 链接 标记 使 用 。 
(1) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-2. html 网 页 文件 。 

(2) 参照 2. 8. 2 小 节 内 容 输入 HTML 标记 及 页 面 文本 内 容 。 

(3) 在 本 地 浏览 网 页 ,查看 页 面 显 示 是 否 符合 设计 要 求 。 

(4) 使 用 FTP 工具 将 prac2-2. html 上 传 到 Web 服务 器 网 站 根 目录 下 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 
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http://Web 服务 器 域名 地 址 /学 号 /prac2-2. html 


检查 网 站 发 布 是 否 正确 。 单 击 页 面 中 的 超 链接 ,检查 超 链接 是 否 正确 。 
(6) 保存 本 地 站 点 。 


实 训 任 务 2-7; 版 权 页 面 制作 


制作 实 训 网 站 项 目 中 版 权 页 面 prac2-5. html 网 页 文件 ; 训练 电子 邮件 超 链接 。 

(1) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-5. html 网 页 文件 。 背 景 图 片 使 
images\tp2-9. jpg。 

(2) 参照 2.9 节 内 容 输 入 HTML 标记 及 页 面 文本 内 容 。 其 中 版 权 信 息 、 电 子 邮 件 地 址 
要 使 用 作者 自己 的 信息 。 

(3) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(4) 使 用 FTP 工具 将 prac2-5. html 上 传 到 Web 服务 器 网 站 根 目录 下 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-5. html 


检查 网 站 发 布 是 否 正确 。 单 击 电子 邮件 超 链 接 , 检 查 能 否 发 送 电子 邮件 。 
(6) 保存 本 地 站 点 。 


实 训 任务 2-8; 滚动 起 链接 制作 


制作 实 训 网 站 项 目 中 的 滚动 超 链 接 页 面 prac2-3. html 以 及 链接 网 页 prac2-3-1. html; 
训练 滚动 标记 、 鼠 标 悬 停 效 果 、 网 页 过 渡 效 果 、 网 页 背景 音乐 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 1 张 同 学 照片 : tp2-8.jpg。 

(2) 在 本 地 站 点 中 新 建 一 个 文件 夹 waves, 从 Internet 上 下 载 一 个 自己 喜欢 的 歌曲 存放 
在 waves 目录 中 。 

(3) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-3. html 网 页 文件 。 

(4) 参照 2. 10 节 内 容 输入 HTML 标记 制作 滚动 超 链接 网 页 ,并 设置 鼠标 悬 停 效果 。 
超 链 接 更 换 成 同学 姓名 ,把 一 个 同学 姓名 超 链 接 到 prac2-3-1. html, 其 他 设置 成 “# ”( 空 
链接 ) 。 

(5) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(6) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2-3-1. html 网 页 文件 。 

(7) 参照 2. 11 节 格 式 制作 显示 同学 照片 .介绍 同学 的 网 页 。 

(8) 在 网 页 头 部 加 入 背景 音乐 和 网 页 过 渡 效 果 。 

(9) 在 本 地 浏览 网 页 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(10) 使 用 FTP 工具 将 prac2-3. html、prac2-3-1. html 和 waves 文件 夹 上 传 到 Web 服 
务 器 网 站 根 目录 下 ,将 图 片 tp2-8. jpg 上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(11) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac2-3. html 
查看 滚动 效果 、 鼠 标 悬 停 效 果 是 否 正确 。 单 击 滚动 超 链接 ,检查 超 链接 是 否 正确 以 及 背景 音 
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乐 、 网 页 过 渡 效 果 。 
(12) 保存 本 地 站 点 。 


实 训 任 务 2-9， 框架 集 制作 


完成 实 训 网 站 项 目 中 框架 集 prac2. html 文件 制作 ; 训练 框架 页 面 布 局 \ 框 架 页 面 中 的 
超 链 接 。 

(1) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac2. html 网 页 文件 。 

(2) 参照 2. 12. 2 小 节 内 容 制 作 框架 集 。 

(3) 修改 prac2-2. html 文件 和 prac2-3. html 文件 ,给 其 中 的 超 链接 添加 target 属性 ,以 
便 打 开 的 页 面 在 框架 集 主 框架 中 显示 和 正确 返回 网 站 首页 。 框 架 名 称 需 要 注意 大 小 写 。 

(4) 使 用 FTP 工具 将 prac2. html、prac2-2. html、prac2-3. html 上 传 到 Web 服务 器 网 
站 根 目 录 下 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 


打开 网 站 首页 文件 Index. html, 单 击 “HTML 标记 ” 超 链 接 按钮 ,打开 prac2. html 框架 网 
页 , 单 击 其 中 的 超 链接 ,检查 是 否 正确 。 
(6) 保存 本 地 站 点 。 


岂 呈 站 


使 用 CSS 样式 表 制 作 网 页 


3.1 “CSS 样式 ”栏目 设计 


本 章 要 完成 教学 项 目 网 站 中 的 “CSS 样式 "栏目 制作 。 本 章 介绍 如 何在 网 页 制作 中 使 
用 CSS 样式 表 和 CSS 样式 属性 ,该 栏目 设计 如 下 。 
3.1.1 页 面 内 容 与 效果 设计 


该 栏目 设计 为 以 “我 的 家 乡 "为 主题 的 网 站 。 栏 目 首页 内 容 与 效果 设计 如 图 3-1 所 示 。 


守 乡 税 稳 


我 的 家 乡 是 享有 “山水 甲 
” 美 名 的 三 西 桂林 。 这 里 
奇峰 溶洞 。 美丽 如 


图 3-1 栏目 首页 设计 


栏目 标题 为 “请 到 我 们 家 乡 来 "。“ 请 到 我 们 家 乡 来 "文字 设计 为 立体 显示 效果 ,并 且 在 
背景 图 片 江水 中 有 倒影 显示 。 

栏目 首页 采用 表格 布局 和 嵌入 式 框 架 结构 。 页 面 左 侧 为 导航 栏 ,中 间 为 嵌入 式 框架 , 右 
侧 为 阴影 文字 “家 乡 桂林 ”、 带 图 片 背景 的 文字 和 投影 文字 * 我 的 家 乡 欢迎 您 >。 页 面 按照 
1024X768px 窗口 设计 。 页 面 布 局 参数 如 图 3-2 所 示 ,标题 栏 下 面 有 10px 的 间隔 。 

导航 栏 中 4 个 超 链接 各 链接 到 一 个 页 面 , 其 中 嵌入 式 框架 中 的 初始 页 面 为 “城市 徽标 ” 
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立体 带 倒影 标题 : 960x200px 

10px 间 隔 
阴影 文字 
家 乡 桂林 

导航 栏 : | ,5, ) 带 背 景 文字 : 

We 谤 入 式 框架 : 540X400px | | 200x150px 

投影 文字 : 

的 家 乡 欢 迎 您 


3-2 页 面 布局 参数 


网 页 ,其 他 超 链接 打开 的 网 页 也 都 在 嵌入 式 框架 中 显示 。“ 城 市 微 标 ” 网 页 上 的 文字 “象山 ” 
有 发 光 效果 。“ 演 江 夜 色 ” 页 面 内 容 与 效果 设计 如 图 3-3 所 示 , 图 片 为 放射 状 半 透明 效果 
显示 。 


窜 乡 德 繁 
a wh 
芦 包 岩洞 
龙 疹 梯田 
返回 首页 


图 3-3 “漓江 夜色 ”页 面 内 容 与 效果 设计 


“ 芦 第 岩洞 "页 面 内 容 与 效果 设计 如 图 3-4 所 示 , 页 面 由 两 幅 带 边框 的 芦 第 岩 洞 内 的 照 
片 构成 。 

“ 龙 疹 梯 田 ” 页 面 中 图 片上 面 的 一 个 区 域内 有 介绍 龙 疹 梯田 的 文字 ,“ 龙 消 梯 田 ” 页 面 内 
容 与 效果 设计 如 图 3-5 所 示 。 


3.1.2 网 页 文件 名 设计 


栏目 首页 文件 名 设计 为 prac3. html, 标 题 栏 使 用 的 背景 素材 图 片 为 tp3-1. jpg, 文 字 介 
绍 使 用 的 背景 图 片 为 tp3-2. jpg。 
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家 乡 术 条 
ee te 
注 江 夜色 二 
区 外 村 洞 
龙 着 梯 田 
返回 首页 


3-4 “ 芦 和 岩洞" 页 面 内 容 与 效果 设计 


案 b 德 和 梧 
我 的 家 乡 是 享有 “山水 四 
城市 微 标 ” 美 名 的 三 西 桂林 。 这 里 
演 江 夜色 
芦 笛 岩洞 
EE 
返回 首页 
Ee 本 a 
~ 800 龙 罕 
图 3-5 “ 龙 背 梯田 ”页面 内 容 与 效果 设计 
超 链 接 打开 的 网 页 在 嵌入 式 框架 内 显示 ,页 面 显示 区 域 按照 533X400px 设计 ,各 个 页 
面 文件 名 设计 为 : 


“城市 徽标 ”页 面 文件 名 prac3-1. html, 使 用 的 素材 图 片 为 tp3-3. jpg。 
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“漓江 夜色 ”页面 文件 名 prac3-2. html, 使 用 的 素材 图 片 为 tp3-4. jpg。 
“ 芦 笛 岩洞 ”页面 文件 名 prac3-3. html, 使 用 的 素材 图 片 为 tp3-5. jpg、tp3-6. jpg。 
“ 龙 消 梯田 "页面 文件 名 prac3-4. html, 使 用 的 素材 图 片 为 tp3-7. jpg。 


3.2 CSS 样式 表 及 肉 入 式 框架 


3.2.1 CSS 样式 表 及 使 用 方法 


CSS(Cascading Style Sheet, 层 琶 样式 表 ) 是 对 HTML 标记 功能 的 扩充 ,许多 使 用 
HTML 标记 不 能 完成 的 功能 可 以 使 用 CSS 完成 。CSS 也 是 一 种 格式 化 网 页 的 标准 方式 ， 
能 精确 定位 页 面 元 素 ,保持 页 面 在 不 同 浏览 器 设置 下 显示 一 致 ,使 页 面 显示 内 容 不 受 浏览 器 
文字 大 小 设置 影响 。 

使 用 CSS 可 以 在 网 页 制作 中 将 格式 处 理 与 内 容 编 辑 工 作 分 开 , 减 轻 劳 动 强度 ,提高 工 
作 效 率 。 在 XML 标记 格式 处 理 和 使 用 JSP、ASP. NET 等 语言 制作 网 页 时 ,CSS 有 着 不 可 
或 缺 的 作用 。 

在 网 页 中 使 用 CSS 一 般 有 以 下 3 种 方式 。 

1. 嵌入 式样 式 表 

艇 入 式样 式 表 是 将 CSS 样式 直接 嵌入 到 HTML 的 标记 内 ,一般 格式 为 ， 


去 标记 style==" 属 性 :属性 值 ;属性 :属性 值 ;[…]">… 二 /标记 > 
艇 入 式样 式 表 的 定义 格式 为 : 
style 一 "属性 :属性 值 ;属性 :属性 值 ;[…]" 


CSS 样式 表 定 义 是 由 属性 和 属性 值 组 成 的 。CSS 的 属性 名 称 和 HTML 标记 的 属性 名 
称 有 所 不 同 ,例如 字体 名 称 属性 为 font-family, 字 体 大 小 属性 为 font-size, 文 字 粗 细 必 性 为 
字体 浓度 font-weight。 属 性 值 也 和 HTML 标记 属性 值 有 所 不 同 ,例如 字体 大 小 可 以 使 用 
cm( 厘 米 ) .mm( 毫 米 ) ,in( 英 寸 ) .pt( 点 ) .px( 像 素 ) 表 示 。 

在 CSS 样式 表 定 义 中 ,属性 和 属性 值 之 间 使 用 :分隔 ,各 个 属性 之 间 使 用 "; “间隔 。 

嵌入 式样 式 表 的 特点 是 简单 . 易 用 ,只 要 在 需要 的 标记 中 嵌入 样式 表 就 行 了 。 但 是 嵌入 
式样 式 表 在 格式 与 内 容 分 离 .减轻 劳动 强度 .提高 工作 效率 方面 没有 什么 帮助 ,只 是 扩充 了 
HTML 标记 的 功能 。 

2. 全 局 格式 页 样式 表 

全 局 格式 页 是 将 CSS 样式 定义 在 网 页 头 部 。 定 义 的 样式 在 整个 网 页 文件 中 都 可 以 使 
用 。 一般 格式 为 : 

<html> 

<head> 

<style> 

样式 定义 行 1 
样式 定义 行 2 


</style> 
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</head> 


全 局 格式 页 样式 表 的 定义 格式 和 谋 入 式样 式 表 不 同 ,常用 样式 类 型 包括 如 下 几 种 。 
(1) 定义 标签 。 定 义 标签 就 是 对 HTML 标记 进行 重新 定义 ,使 其 具有 与 原来 不 同 的 外 
观 。 这 种 全 局 格式 页 定义 格式 为 : 
<style> 
标记 { 
属性 : 属性 值 ; 
属性 : 属性 值 ; 


} 


</style> 


一 般 来 说 ,HTML 标记 在 样式 表 中 定义 之 后 ,标记 外 观 与 原 标记 已 经 不 同 ,不 能 再 使 用 
标记 的 原 外 观 属性 。 在 这 种 样式 表 定 义 中 ,标签 必须 是 HTML 的 标记 ,用 户 不 能 自 创 
标记 。 

(2) 类 。 类 是 可 以 在 任何 标记 内 使 用 的 样式 。 使 用 类 定义 全 局 格式 页 样式 表 的 格 
式 为 : 

<style> 

.类 名 称 { 


属性 : 属性 值 ; 
属性 : 属性 值 ; 


} 
</style> 


在 网 页 正文 中 使 用 样式 表 中 类 的 方法 是 : 


<body> 
达标 记 class= 二 "类 名 称 "二 … 二/ 标记 过 


</body> 


类 定义 可 以 在 任何 标记 内 使 用 。 

在 定义 类 时 ,类 名 称 可 以 任意 命名 ,但 前 面 的 “. "不 能 丢 ; 使 用 类 名 称 时 ,类 名 称 前 不 使 
用 ”。 

全 局 格式 页 样式 表 定 义 之 后 ,在 整个 网 页 都 可 以 使 用 , 比 起 嵌入 式样 式 表 其 利用 率 显 著 
提高 。 但 是 这 种 方式 在 每 个 网 页 中 还 是 都 需要 自己 定义 ,不 能 实现 样式 表 的 页 间 共享 。 

3。 样式 表 文 件 

样式 表 文 件 可 以 实现 多 个 网 页 文档 共享 样式 表 定 义 ,真正 做 到 格式 处 理 与 内 容 分 离 , 提 
高 工作 效率 ,使 页 面 格式 标准 化 。 

(1) 生成 样式 表 文 件 。 样 式 表 文件 就 是 只 包含 标签 和 类 定义 项 的 文本 文件 ,文件 扩展 
名 为 . css。 

(2) 使 用 样式 表 文 件 。 在 网 页 中 使 用 样式 表 文 件 有 以 下 两 种 方式 。 
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@ 链接 外 部 文件 。 链 接 外 部 文件 方式 是 常用 的 样式 表 共 享 方式 ,这 种 方式 只 是 将 样式 
表 文 件 链接 到 页 面 中 ,不 需要 占用 存储 空间 。 在 网 页 中 链接 外 部 样式 表 的 标记 格式 为 : 

<head> 

过 link href 王 "样式 表 文 件 名 " rel 王 "stylesheet" type 一 "text/css" 二 

</head> 

在 链接 外 部 样式 表 的 link 二 标记 中 ,除了 样式 表 文 件 名 需要 指定 外 ,其 他 属性 值 都 是 
固定 的 。rel 属性 值 只 能 是 stylesheet,type 属性 值 只 能 是 text/css。 

@ 导入 格式 页 。 导 入 格式 页 就 是 将 样式 表 文 件 导入 到 本 网 页 文件 中 。 这 种 方式 较 少 
使 用 ,因为 浪费 存储 空间 。 在 页 面 中 导入 格式 页 的 标记 格式 为 ; 

<head> 

<style type= "text/css"> 

@import url(" 样 式 文件 名 "); 


</style> 
</head> 


导入 格式 页 和 链接 外 部 文件 的 效果 相同 。 
3.2.2 CSS 属性 


CSS 中 使 用 的 属性 和 HTML 标记 属性 有 所 不 同 , 使 用 时 不 能 混用 。 下 面 介绍 常用 的 
CSS 属性 及 常用 的 属性 值 表示 。 

1. 字体 属性 

字体 属性 说 明 网 页 中 文字 的 显示 方式 ,CSS 的 字体 属性 有 如 下 几 种 。 

(1) font-family: 字体 名 称 。 属 性 值 : 宋体 .隶书 …… 属性 值 中 也 可 以 指定 几 种 字体 
名 ,以 防止 浏览 器 中 没有 指定 的 字体 。 该 属性 优先 使 用 排 在 前 面 的 属性 值 。 

(2) font-style: 字体 风格 。 属 性 值 : normal( 正 常 ) ,italic( 斜 体 ) 。 

(3) font-size: 字体 大 小 。 属 性 值 : n 单位 。 常 用 单位 有 cm、mmin、pt、px( 下 同 )。 

(4) font-weigh: 字体 浓度 。 属 性 值 : normal( 正 常 )、blod( 加 粗 )、bloder( 特 粗 )、lighter 
( 细 体 ) ,或 使 用 100 一 900 表示 的 字体 浓度 ,400 为 正常 字体 。 

2. 文本 相关 属性 

文本 相关 属性 用 于 控制 文本 段落 格式 ,一 些 属性 不 能 用 于 过 span 之 。 常 用 的 属性 有 如 
下 几 种 。 

(1) text-align: 水 平 对 齐 方式 。 属 性 值 : left|right|center|justify( 左 , 右 、 居 中 、 两 端 对 齐 )。 

(2) text-indent: 首 行 缩 进 。 属 性 值 : n 单位 。 

(3) text-decoration: 文本 修饰 。 属 性 值 : underline| overline|line-through( 下 划 线 、 上 
划 线 、 删 除 线 ) 。 

(4) text-transform: 文字 大 小 写 。 属 性 值 : capitalize| uppercase| lowercase (大 写 单 
词 首 字母 .大 写 、 小 写 )。 

(5) vertical-align: 垂直 对 齐 方式 。 属 性 值 : top| middle| bottom | sub | super( 顶 部 ,中 
间 、 底 部 ,下 标 、 上 标 )。 

(6) letter-spacing: 字符 间距 。 属 性 值 : n 单位 。 
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(7) line-height: 行 高 。 属 性 值 : n 单位 。 

(8) color: 颜色 。 颜 色 属性 值 与 HTML 标记 中 的 颜色 表示 相同 。 

(9) margin: 四 周边 距 。 属 性 值 : n 单位 。 

margin-left .margin-top、margin-right、margin-bottom: 分 别 指定 边 距 。 

3. 文本 背景 属性 

(1) background-color: 背景 颜色 。 

(2) background-image: URL( 图 片 文件 路 径 ) 。 设 置 文本 行 背景 图 片 。 

(3) background-repeat: 背景 图 片 重 复方 式 。 属 性 值 : repeat-x|repeat-y|no-repeat( 横 
向 重复 .纵向 重复 .不 重复 )。 注 意 , 背 景 图 片 只 能 在 文字 显示 区 域 重复 。 

(4) background-position: 水 平 对 齐 .垂直 对 齐 。 

水 平 对 齐 : left|right|center|n|n% 以 文本 区 域 堪 侧 | 右 侧 | 水 平 居中 | 距 左 侧 n 单 
位 | 文本 区 域 的 n% 对 齐 。 

垂直 对 齐 : top|center|bottom|n|ln% 
单位 | 文本 区 域 高 度 的 n% 对 齐 。 

4. 边框 属性 

常用 的 边框 属性 有 如 下 几 种 。 

(1) border-style: 边框 类 型 。 常 用 的 有 solid( 实 线 ) ,double( 双 线 ) .groove( 槽 框 )、 
inset( 内 部 镶嵌 ) .outset (外 部 灸 嵌 ) 立 体 效 果 。 

(2) border-width: 边框 宽度 ,n 单位 。 

(3) border-color: 边框 颜色 。 

(4) width: 区 域 宽度 ,n 单 位。 

(5) height: 区 域 高 度 ,n 单位 。 

5. 定位 属性 

CSS 定位 属性 可 以 对 网 页 元 素 进 行 精确 的 定位 。CSS 定位 属性 包括 如 下 几 种 。 

(1) position: 定位 方式 。 常 用 的 有 absolute( 绝 对 位 置 ) relative( 相 对 位 置 )。 绝 对 位 
置 是 相对 于 窗口 左上 和 角 的 坐标 位 置 ; 相对 位 置 是 相对 于 当前 位 置 。 

(2) top: 纵向 起 始 位 置 ,一 般 使 用 mn 单位 或 窗口 高 度 百 分 数 。 

(3) left: 横向 起 始 位 置 ,一般 使 用 n 单位 或 窗口 宽度 百分数 。 

(4) z-index: Z 向 坐标 。 由 于 使 用 定位 属性 可 以 使 元 素 位 置 重 到 ,所 以 使 用 Z 向 坐标 确 
定 前 后 位 置 。 属 性 值 取 数值 一 n 一 十 n, 从 后 到 前 按 数值 从 小 到 大 排列 。 

经 常 和 定位 属性 一 起 使 用 的 属性 是 width 和 height 属性 ,用 于 指定 定位 的 区 域 。 

6. 浮动 属性 

CSS 的 浮动 属性 可 以 实现 类 似 Word 中 字体 下 沉 的 效果 。 常 用 的 浮动 属性 如 下 。 

float: left|right, 指 定 元 素 浮动 到 左 方 还 是 右 方 。 


3.2.3 小 镜 


如 同 Photoshop 中 的 滤 镜 可 以 给 图 像 添加 多 种 效果 一 样 ,CSS 滤 镜 可 以 给 页 面 增加 许 
多 绚丽 多 姿 的 色彩 。CSS 滤 镜 效果 与 浏览 器 版 本 有 关 ,IE5. 0 以 下 版 本 对 滤 镜 的 支持 较 差 ， 
而 且 一 些 滤 镜 在 不 使 用 CSS 定位 属性 时 不 能 产生 滤 镜 效果 。 


以 文本 区 域 顶部 | 垂直 居中 | 底部 | 距 顶 部 n 
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CSS 滤 镜 是 CSS 的 一 个 filter 属性 。 格 式 为 : 
filter: 属 性 值 (参数 二 参数 值 [, …] ) 属 性 值 (参数 = 参数 值 [, …]) 


根据 属性 值 和 参数 设置 的 不 同 可 以 产生 不 同 的 效果 。 常 用 的 CSS 滤 镜 属性 值 如 下 。 

alpha: 透明 滤 镜 

blur: 模糊 滤 镜 

shadow/DropShadow: 阴影 效果 滤 镜 

glow: 发 光 效 果 滤 镜 

chroma: 屏蔽 色 滤 镜 

FlipH: 水 平 镜像 滤 镜 

FlipV: 垂直 镜像 滤 镜 

wave: 波纹 滤 镜 

gray: 灰 度 滤 镜 

invert: 翻转 滤 镜 

Xray: X 线 滤 镜 

一 些 滤 镜 需 要 和 CSS 的 定位 属性 一 起 使 用 ,否则 没有 滤 镜 效果 。 一 些 滤 镜 不 能 用 于 图 
片 , 如 发 光 滤 镜 。 滤 镜 格式 为 ， 

filter: 属 性 值 (参数 = 参数 值 [, …]) [属性 值 (参数 = 参数 值 [, …])] ; 

下 面 介绍 几 个 常用 的 滤 镜 。 

1. 透明 滤 镜 alpha 

透明 滤 镜 是 以 透明 效果 显示 指定 区 域 的 对 象 , 格 式 为， 

filter:alpha(opacity 一 不 透明 度 [,finishopacity 王 结束 不 透明 度 , style 二 样式 , startX 一 n，startY 一 m， 

finishX=p, finishY=q ]); 

其 中 ,n、m、p、q 均 为 整数 值 。 

不 透明 度 的 可 选 值 为 0 一 100,0 代表 完全 透明 ,100 代表 完全 不 透明 。 

只 使 用 opacity 参数 时 ,表示 整个 对 象 的 不 透明 度 。 

使 用 可 选项 参数 时 ,style 参数 是 必需 的 , 它 指示 透明 区 域 的 形状 。 其 中 ,1 代表 线性 ; 
2 代表 放射 状 ; 3 代表 长 方形 。 

finishopacity 参数 指示 结束 区 域 的 不 透明 度 , 这 时 opacity 指示 开始 区 域 的 不 透明 度 。 
区 域 是 由 startX,startY ,finishX ,finishY 指定 的 。finishopacity 参数 的 默认 值 为 0。 

startX ,startY ,finishX ,finishY 参数 的 默认 值 与 style 参数 的 取 值 有 关 。style 二 1 时 默 
认 值 为 startX==0,finishX 二 区 域 宽度 ,startY 二 0,finishY 二 0。 起 始 、 结 束 区 域 是 针对 对 象 
的 ,而 不 是 页 面 窗口 坐标 。style 二 2 或 3 时 ,区 域 起 始点 为 对 象 区 域 中 心 ,结束 点 为 外 边框 ， 
指定 区 域 值 无 效 。 

2. 模糊 滤 镜 blur 与 阴影 效果 滤 镜 shadow、DropShadow 

(1) 模糊 滤 镜 产生 类 似 阴 影 的 效果 。 模 糊 滤 镜 格式 为 : 


filter:blur(add 二 true|false, direction 一 方向 ,strength 一 长 度 ); 
add 参数 默认 值 为 true。add 为 true 时 为 阴影 模式 ; add 为 false 时 为 模糊 模式 。 
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direction 为 产生 阴影 的 方向 ,默认 值 为 270( 向 左 ), 只 能 使 用 45 的 整数 倍数 值 ,0 为 垂直 向 
上 , 按 顺 时 针 递 增 。strength 为 阴影 长 度 ,默认 为 5px。 
(2) shadow 滤 镜 。shadow 滤 镜 可 以 在 指定 方向 产生 阴影 。 格 式 为 : 


fiter:shadow(color 一 阴影 颜色 , direction 一 角度 ) ; 


direction 指示 阴影 的 方向 , 它 的 取 值 和 模糊 滤 镜 是 一 样 的 。 
(3) DropShadow 滤 镜 。DropShadow 滤 镜 可 以 产生 投影 。 格 式 为 : 


filter: DropShadow(color 二 投影 颜色 ,offx==n,offy 二 m, positive 二 true |false); 


offx 和 offy 分 为 zx 方向 和 y 方向 投影 的 偏 移 量 ,n、m 代表 偏 移 量 整 数值 。 正 整数 代表 
工 轴 的 向 布 方向 和 > 轴 的 向 下 方向 , 负 整 数 则 相反 。 偏 移 量 单 位 为 像素 ,但 是 偏 移 量 参数 中 
不 能 指定 单位 。positive 参数 有 两 个 值 : true 表示 为 可 见 对 象 建立 投影 (默认 值 ) ,false 表 
示 为 对 象 透 明 部 分 建立 可 见 的 投影 。 低 版 本 浏览 器 不 支持 positive 参数 。 

3. 发 光 效 果 滤 镜 glow 

发 光 效 果 滤 镜 glow 会 使 对 象 的 边缘 产生 类 似 发 光 的 效果 。 格 式 为 ; 

filter:glow(color 二 发 光 颜 色 , strength 二 光线 长 度 ) ; 


4. 水 平 与 垂直 镜像 滤 镜 FlipH FlipV 

FlipH FlipV 滤 镜 用 于 实现 对 象 的 水 平 与 垂直 翻转 效果 。 格 式 为 : 

filter: FlipH | FlipV; 

5. 灰 度 滤 镜 gray ,翻转 滤 镜 invert 和 X 线 滤 镜 Xray 

灰 度 滤 镜 gray、 翻 转 滤 镜 invert 和 X 线 滤 镜 Xray 都 是 没有 参数 的 滤 镜 。 灰 度 滤 镜 
gray 把 彩色 图 片 转换 成 灰 度 等 级 的 图 片 (黑白 图 片 ); 翻转 滤 镜 invert 对 图 片 的 色彩 、 饱 和 
度 和 亮度 值 产生 翻转 效果 ; X 线 滤 镜 Xray 可 以 产生 类 似 X 光 片 的 效果 。 


3.2.4 嵌入 式 框架 


嵌入 式 框架 (也 称 浮动 框架 ) 是 使 用 HTML 标记 二 iframe 盖 实现 的 。 所 谓 嵌 入 式 框架 
是 指使 用 该 标记 定义 的 框架 不 需要 单独 保存 框架 文件 ,框架 可 以 嵌 放 在 任意 的 表格 单元 格 
内 ,所 以 使 用 比较 灵活 方便 。<<iframe 之 标记 格式 如 下 : 


过 iframe src 二 URL name 二 "框架 名 " width==n height 二 m frameborder 二 "0|1"[ marginwidth 王 边 距 
宽 marginheight 一 边 距 高 ] srcolling 一 "yes| no| auto" 二 一 /iframe> 


在 超 链 接 标记 中 将 目标 属性 设置 为 target= "框架 名 ”,' 页 面 将 显示 在 嵌入 式 框架 中 。 


3.3 “城市 徽标” 页面 制作 


该 任务 完成 CSS 栏目 中 的 “城市 徽标 ”网 页 prac3-1. html 文档 的 制作 。 页 面 大 小 按照 
533X400px 制作 ,使 用 的 图 片 素材 为 images\tp3-3. jpg。 

1. 任务 分 析 

该 任务 完成 CSS 栏目 中 的 “城市 徽标 ”网 页 制作 。 该 任务 中 主要 是 利用 CSS 滤 镜 实现 
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在 图 片上 的 文字 发 光 效 果 。 

按照 以 往 的 经 验 ,可 以 将 图 片 作为 背景 图 片 ,然后 在 合适 的 位 置 放置 发 光 文字 。 但 是 按 
照 过 去 的 做 法 ,如果 将 图 片 作为 网 页 背景 , 当 窗口 大 于 背景 图 片 尺寸 时 ,背景 图 片 会 发 生 重 
复 ; 当 背 景 图 片 尺寸 大 于 窗口 时 ,又 无 法 指定 背景 图 片 的 大 小 ,所 以 不 好 控制 页 面 效果 。 还 
有 ,发 光 文字 也 无 法 使 用 HTML 标记 完成 ,所 以 制作 该 网 页 需要 使 用 CSS 样式 。 

2. 制作 网 页 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 根 目录 下 的 prac3-1. html。 在 记事 本 文 
档 窗口 内 输入 如 下 内 容 ， 


<html> 
<head> 
<<title> 城 市 徽标 <<Vtitle> 
<style> 
si 
position:absolute; 
left:62px; 
top:50px; 
z-index:2; 
fontfamily: "华文 新 魏 "; 
font-size: 42px; 
color: #FF9933; 
line-height: 70px; 
filter: glow(color= #cc3300, strength=10); 
} 
</style> 
</head> 
body leftmargin= "0" topmargin= "0"> 
<p><img src="images/tp3-3.jpg" ></p> 
过 p class 一 "sl" 之 &nbsp; 象 山 &nbsp; 达 /p> 
</body> 
</html> 


在 代码 中 图 片 使 用 二 img 二 标记 插入 ,由 于 素材 图 片 大 小 已 经 处 理 成 了 533X400px, 所 
以 在 二 img 之 标记 中 不 需要 指定 图 片 的 大 小 。 

< 所 body 二 标记 中 设置 了 leftmargin= 王 "0" topmargin 王 "0" 属 性 ,这 是 为 了 去 掉 在 艇 入 式 
框架 中 显示 时 的 页 边 距 。 

在 全 局 各 式 页 中 定义 了 样式 类 sl,sl 中 的 属性 包括 如 下 内 容 。 

QO@ 定位 属性 : 


position:absolute; left:62px; top:50px;z-index:2; 


用 于 “象山 ”文字 相对 于 窗口 位 置 的 定位 ,由 于 是 在 图 片上 面 显 示 , 所 以 使 用 了 z-index:2。 
@ 文本 属性 : 


font-family: "华文 新 魏 " ;font-size: 42px;color: #FF9933; line-height: 70px; 


用 于 指定 “象山 "文字 字体 ,大 小 .颜色 。 “line-height: 70px;” 和 HTML 标记 中 “&nbsp; 象 
山 &nbsp;” 文 字 前 后 的 空格 是 用 于 给 发 光 文字 留 出 发 光 的 空间 ,否则 文字 发 光 效果 会 不 


@ 发 光 滤 镜 : 

filter: glow(color= # cc3300, strength=10); 

用 于 “象山 "文字 的 发 光 效果 ,包括 发 光 颜 色 和 光线 长 度 。 

“<p class 二 "sl1" 之 &nbsp; 象 山 &nbsp;<</p 二 ”用 于 给 “象山 ”文字 指定 sl 样式 。 该 
页 面 在 本 地 浏览 器 中 浏览 结果 如 图 3-6 所 示 。 
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图 3-6 “城市 徽标 ”网 页 效果 


3.4 “漓江 夜色 "网 页 制作 


该 任务 完成 CSS 栏目 中 的 “漓江 夜色 ”网 页 prac3-2. html 文档 的 制作 。 页 面 大 小 按照 
533X400px 制作 ,使 用 的 图 片 素材 为 images\tp3-4. jpg。 

1. 任务 分 析 

该 任务 完成 CSS 栏目 中 的 “漓江 夜色 ”网 页 制作 。 该 任务 中 主要 是 利用 CSS 滤 镜 实现 
图 片 放射 状 半 透 明 效果 显示 。 

2. 制作 网 页 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 根 目录 下 的 prac3-2. html。 在 记事 本 文 
档 窗口 内 输入 如 下 内 容 : 

<html> 

<head> 

过 title 二 漓江 夜色 </title> 

=<style> 


"el 
position: absolute; 
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filter: alpha(opacity=100, finishopacity=0, style=2); 


} 
</style> 
</head> 
body leftmargin= "0" topmargin= "0"> 
<img src= "images/tp3-4.jpg" class 一 "sl1" > 
</body> 
</html> 


在 全 局 格式 页 中 定义 了 样式 类 sl,sl 样式 中 主要 使 用 了 透明 滤 镜 。style 二 2, 即 放射 状 
透明 效果 。 二 img src 二 "images/tp3-4. jpg”class 二 "sl" 二 是 将 样式 直接 内 入 到 了 img 标 
记 内 ,为 img 标记 指定 显示 的 样式 。 

在 本 地 浏览 该 网 页 效果 如 图 3-7 所 示 。 
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图 3-7 “漓江 夜色 ”网 页 效果 


3.5 “ 芦 笛 岩洞 "网 页 制作 


1. 任务 分 析 

该 任务 完成 CSS 栏目 中 的 “ 芦 笛 岩 洞 ?网 页 制作 。 该 任务 中 主要 是 利用 CSS 样式 ,将 两 
幅 图 片 images\tp3-5. jpg、tp3-6. jpg 放 惫 在 两 个 边框 内 部 分 重生 显示 。 

页 面 设计 效果 可 以 通过 CSS 定位 属性 ,边框 属性 和 z-index 属性 实现 。 按 照 设计 效果 ， 
在 全 局 格式 页 中 定义 两 个 样式 类 如 下 : 


.sll{ 
position:absolute; 
top:10px; 
left:20; 
z-index:1; 
border-style: groove; 
width:267px; 
height:200px; 
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border-width:5mm; 
border-color: red; 
} 

.S2 { 
position:absolute; 
top:164px; 
left:230px; 
z-index:2; 
border-style: double; 
width:267px; 
height:200px; 
border-width: 10pt; 
border-color: orange; 


} 
将 两 个 样式 分 别 指定 给 两 幅 图 片 : 


<img src= "images/tp3-5.jpg" class="s1"> 
<img src= "images/tp3-6.jpg" class="s2" > 


就 可 以 实现 设计 效果 。 

2. 制作 网 页 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 根 目录 下 的 prac3-3. html。 在 记事 本 文 
档 窗口 内 输入 如 下 内 容 : 


<html> 
<head> 
<<title> 芦 笛 岩 洞天 /title> 
<style> 
a 
position:absolute; 
top:10px; 
left:20; 
z-index:1; 
border-style: groove; 
width:267px; 
height:200px; 
border-width: 5mm; 
border-color: red; 


.S21{ 
position:absolute; 
top: 164px; 
left:230px; 
z-index:2; 
border-style: double; 
width:267px; 
height:200px; 
border-width: 10pt; 
border-color: orange; 
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</style> 
</head> 
一 body> 
<img src= "images/tp3-5.jpg" class 
<img src= "images/tp3-6.jpg" class="s2"> 
</body> 
</html> 
在 本 地 浏览 器 中 浏览 该 页 面 效 果 如 图 3-8 所 示 。 
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图 3-8 “ 芦 笛 岩 洞 "网 页 效果 
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3.6 “ 龙 背 梯田 ”网 页 制作 
1. 任务 分 析 


该 任务 完成 CSS 栏目 中 的 “ 龙 次 梯田 ”网 页 制作 。 该 任务 中 主要 是 利用 CSS 样式 ,在 图 
片上 的 指定 区 域 显示 文字 。 

按照 页 面 设计 效果 ,在 图 片 images\tp3-7. jpg 上 一 个 指定 区 域 放 置 说 明文 字 , 可 以 通过 
CSS 定位 属性 和 指定 显示 区 域 完成 。 说 明文 字 可 以 通过 下 面 的 样式 实现 : 


.sl{ 

position: absolute; 
z-index: 2; 

left: 70px; 

top: 320px; 
height: 50px; 
width: 400px; 
font-weight: 600; 
color: #FFFFFF:; 


font-size: 12px; 


(YX @ 静态 网 站 制作 项 目 教程 


其 中 定位 属性 指定 文字 显示 的 开始 位 置 及 Z 轴 属 性 值 ,width、height 属性 指定 文字 显 


示 的 区 域 。 

2. 制作 网 页 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 根 目录 下 的 prac3-4. html。 在 记事 本 文 
档 窗口 内 输入 如 下 内 容 : 

<html> 

<head> 

<title> 龙 俏 梯 田 一 /title> 

<style> 


.sl1{ 

position: absolute; 

z-index: 2; 

left: 70px; 

top: 320px; 

height: 50px; 

width: 400px; 

font-weight: 600; 

color: #FFFFFF; 

font-size: 12px; 

} 

</style> 
</head> 
body leftmargin= "0" topmargin= "0"> 
<img src 一 "images/tp3-7.jpg" > 
过 p class 二 "s1" 之 &nbsp; &nbsp; &nbsp; &nbsp; 龙 消 梯 田 开 造 始 于 宋代 , 由 居住 在 这 里 的 壮族 、 瑞 
族人 民 祖 祖 韭 非 开 造 . 龙 消 梯田 遍布 崇山峻岭 ,上 下 落差 达 800 多 米 . 龙 疹 梯 田 的 景色 随 季节 而 变化 ， 
春 如 银 带 相合 ; 夏 风 翻 卷 道道 绿 波 ; 金秋 漫 山 铺 金 ; 隆冬 银 装 素 里 .这 里 不 仅仅 是 富饶 的 农田 ,这 里 
更 是 旅游 胜地 .二 /p 二 
</body> 
</html> 


在 本 地 浏览 器 中 浏览 该 页 面 效 果 如 图 3-9 所 示 。 
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3.7 CSS 栏目 首页 制作 


该 任务 完成 CSS 栏目 中 的 栏目 首页 网 页 prac3. html 文档 的 制作 。 使 用 的 图 片 素材 为 
images\tp3-1. jpg\tp3-2. jpg。 

1. 任务 分 析 

本 教学 任务 是 制作 “CSS 样式 ?栏目 中 的 栏目 首页 。 根 据 教学 项 目 网 站 中 该 页 面 的 设 
计 , 该 任务 中 主要 包括 表格 布局 .嵌入 式 框架 .CSS 样式 及 滤 镜 效果 。 

(1) 页 面 布 局 。 按 照 图 3-1CSS 栏目 首页 设计 与 图 3-2 页 面 布局 参数 设计 要 求 ,该 页 
采用 表格 布局 和 嵌入 式 框 架 结构 ,页 面 按 照 1024X768px 窗口 设计 ,顶部 栏目 标题 为 960X 
200px 的 单元 格 ,单元 格 背 景 图 片 为 tp3-1. jpg, 第 2 行为 10px 的 空白 间隔 。 

第 3 行 左 侧 为 160X400px 的 栏目 导航 栏 ,中 间 为 540X400px 的 嵌入 式 框架 , 右 侧 为 
260 X400px 的 文字 区 。 文 字 区 上 方 为 带 阴影 文字 “家 乡 桂林 ”, 中 间 的 200X150px 区 域 为 
带 图 片 背 景 的 文字 ,下 方 是 投影 文字 “我 的 家 乡 欢 迎 您 ”。 


网 页 布局 可 以 使 用 下 列 标记 完成 : 
table width= "960" border= "0" cellpadding= "0" cellspacing= "0"> 
<tr> 
<td height 一 "200" colspan="3"> </td> 
</tr> 
<tr><td height="10" colspan="3"></td></tr> 
<tr> 


<td width="160" > 
<td width="540" height="400" > 
<iframe src= "prac3-1.html" name= "miframe" width 一 533 height 一 400 scrolling=no></iframe> 
</td> 
<td width="260" > </td> 
<</tr> 
</table> 


框架 不 使 用 边框 和 滚动 条 ,框架 名 为 “miframe”, 框 架 中 的 初始 页 面 使 用 * 城 市 徽标 ” 
prac3-1. html 。 

在 图 3-1 中 可 以 看 到 框架 外 边 有 一 个 边框 ,这 个 边框 不 能 使 用 嵌入 式 框 架 的 属性 指定 ， 
可 以 使 用 表格 实现 。 在 中 间 单 元 格 内 插入 一 个 1 行 1 列 的 表格 ,设置 表格 的 边框 和 边框 颜 
色 , 实 现代 码 如 下 : 

<td width="540" height="400" > 

<table border="3" bordercolor="#66CCFF" width="540" height="400"> 

<tr><td> 

<iframe src= "prac3-1. html" name= "miframe" width=533 height= 400 scrolling=no ></iframe> 

</td></tr> 

</table> 

</td> 

(2) 栏目 导航 栏 制作 。 栏 目 导航 栏 放置 在 160 X400px 的 单元 格 内 ,为 了 美观 起 见 , 在 
去 td> 标 记 内 可 以 使 用 水 平 、 垂 直 对 齐 属性 。 每 个 超 链接 标记 的 traget 属性 要 使 用 target 一 
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"miframe" 。 超 链接 文字 大 小 设置 为 18px, 导 航 栏 单元 格 代码 为 : 


二 td width 
=p style= "font-size: 


"160" valign= "middle" align="center"> 

18px;"><=a href="prac3-1. html" 
18px;"><a href="prac3-2. html" 
18px;"><a href="prac3-3. html" 
18px;"><=a href="prac3-4. html" 


=p style= "font-size: 
=p style= "font-size: 
<p style= "font-size: 
=p style= "font-size: 
</td> 


超 链接 文字 大 小 设置 使 用 CSS 属性 更 加 直观 。 


target 一 "miframe" 之 城市 徽标 一 /a 之 一 /p> 
target 一 "miframe" 盖 漓江 夜色 一 /ai 一 /p> 
target 二 "miframe" 记 芦 笛 岩洞 二 /a 之/p 
target 一 "miframe" 之 龙 背 梯 田 一 /a>> 一 /p> 


18pxj;" 盖 一 a href 一 "index.html" target 一 "_top" 之 返回 首页 一 /a> 二 /p> 


(3) 栏目 标题 制作 。 栏 目标 题 中 的 图 片 可 以 通过 设置 单元 格 背 景 图 片 实现 ,也 可 以 在 
单元 格 内 插 和 人 图片。 栏目 标题 文字 的 立体 效果 可 以 使 用 多 个 重奏 错位 放置 的 文字 实现 ， 


例如 ， 


<p style= "position:absolute; top: 55px; left:279px; z-index: 1;font-size: 64px; color: # 990000; font- 


weigh:800;font-family :华文 新 魏 ;" 二 请 到 我 们 家 乡 来 <</p 


<p style= "position:absolute; top: 53px; left:277px; z-index: 2;font-size: 64px; color: # 990000; font- 


weigh:800;fontfamily: 华 文 新 魏 ;" 之 请 到 我 们 家 乡 来 一 /p> 


<p style= "position: absolute; top: 51px; left: 275px; z-index: 3; font-size: 64px; color: # fft0000; font- 


weigh:800;font-family :华文 新 魏 ;" 二 请 到 我 们 家 乡 来 <</p 二 
最 顶层 的 文字 颜色 比 下 层 的 文字 颜色 更 明亮 ,用 以 实现 立体 感 。 文 字 水 中 倒影 可 以 通 


过 垂直 反 转 滤 镜 实现 ,定义 一 个 CSS 类 如 下 : 


“ald 
position:absolute; 
top:140px; 
left:275px; 
z-index:1; 
font-size:64px; 
color: # 990000; 
font-weigh:800; 
font-family: 华 文 新 魏 ; 
filter: flipv; 

} 


为 了 更 形象 逼真 ,可 以 使 用 透明 滤 镜 使 倒影 文字 变 模糊 一 些 , 当 然 也 可 以 使 用 模糊 滤 
镜 ,但 这 两 种 滤 镜 的 效果 不 一 样 。 加 入 透明 滤 镜 后 的 样式 为 : 


-81 { 
position:absolute; 
top:140px; 
left:275px; 
z-index:1; 
font-size:64px; 
color: # 990000; 
font-weigh: 800; 
font-family :华文 新 魏 ; 


filter: alpha(opacity=30, finishopacity= 30, style 一 1) flipv; 
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在 透明 滤 镜 中 ,将 起 始 不 透明 度 和 结束 不 透明 度 都 设置 为 30(%), 即 倒影 文字 的 不 透 
明度 只 有 30% ,使 文字 呈现 出 模糊 效果 。 注 意 使 用 两 个 滤 镜 的 格式 ,两 个 滤 镜 之 间 使 用 空 
格 间隔 ,不 能 使 用 *; ”间隔 。 

(4) 阴影 效果 文字 “家 乡 桂林 ”制作 。 带 阴影 效果 文字 可 以 使 用 CSS 阴影 滤 镜 filter: 
shadow() 实 现 。 按 照 设计 要 求 ,定义 一 个 CSS 样式 类 如 下 : 


.32 { 


} 

其 中 ,position: absolute;left: 760px;top: 260px;width: 170px 指定 显示 位 置 与 显示 
区 域 ; font-family: "隶书 ";font-size: 40px;font-weight: 800; color: #00994d 指定 文字 的 
属性 ; 阴影 滤 镜 filter: shadow (color 二 #0099cc,， direction 二 45) 指 定 阴 影 效 果 、 颜 色 和 阴 


影 方 向 。 


使 用 
过 p class 一 "s2" 二 家 乡 桂林 二 /p 二 


将 该 样式 指定 给 文字 即 可 完成 设计 要 求 。 
(5) 带 背 景 图 片 文字 制作 。 带 背景 图 片 文字 可 以 使 用 下 面 样式 完成 : 


.s31{ 


} 


position: absolute; 

left: 760px; 

top: 260px; 

width: 170px; 

font-family: "隶书 "; 

font-size: 40px; 

font-weight: 800; 

color: #00994d; 

filter: shadow(color= #0099ce, direction=45); 


position: absolute; 

left: 740px; 

top: 335px; 

height: 150px; 

width: 200px; 
background-image: url(images/tp3-2.jpg) ; 
background-repeat: no-repeat; 
font-family: "宋体 "; 
font-size: 14px; 

line-height: 20px; 
font-weight: 600; 

color: #000000; 


其 中 ,position: absolute;left: 740px;top: 335px;height: 150px;width: 200px 指定 显 
示 区 域 位 置 、 大 小 ; background-image: url(images/tp3-2. jpg); background-repeat: no- 
repeat 指定 显示 的 背景 图 片 与 背景 图 片 重复 方式 (不 重复 ); 其 他 为 文本 样式 。 

(6) 投影 效果 文字 “我 的 家 乡 欢 迎 您 "制作 。 投 影 效 果 文 字 使 用 CSS 投影 滤 镜 filter: 
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DropShadow( ) 完 成 。 定 义 一 个 CSS 样式 类 如 下 : 


.S4{ 
position: absolute; 
left: 755px; 
top: 535px; 
height: 70px; 
width: 175px; 
font-family: "隶书 "; 
font-size: 40px; 
font-weight: 600; 
color: #cc0000; 
filter: DropShadow(color= #333300, offX=3, offY=3); 

} 


其 中 ,position: absolute;left: 755px;top: 535px;height: 70px; width: 175px 指定 显 
示 区 域 位 置 . 大 小 ; font-family: "隶书 " ;font-size: 40px;font-weight: 600;color: #cc0000 
指定 文本 属性 ; 投影 滤 镜 filter: DropShadow(color 二 #333300, offX=3, offY= 二 3) 指 定投 
影 效 果 、 投 影 颜 色 和 偏离 值 。 

2. 制作 网 页 

打开 Windows 记事 本 ,将 文件 另存 为 本 地 站 点 根 目录 下 的 prac3. html。 在 记事 本 文档 
窗口 内 输入 如 下 内 容 : 


<html> 
<head> 
<title>css</title> 
<style> 
“i 
position:absolute; 
top:140px; 
left:275px; 
z-index:1; 
font-size:64px; 
color: # 990000; 
font-weigh:800; 
font-family: 华 文 新 魏 ; 
filter: alpha(opacity= 30, finishopacity= 30, style=1) flipv; 


.s2{ 
position: absolute; 
left: 760px; 
top: 260px; 
width: 170pxi 
font-family: "隶书 "; 
font-size: 40px; 
font-weight: 800; 
color: #00994d; 
filter: shadow(color= # 0099ce, direction=45); 
width: 170px; 
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a 
position: absolute; 
left: 740px; 
top: 335px; 
height: 150px; 
width: 200px; 
background-image: url(images/tp3-2.jpg) ; 
background-repeat: no-repeat; 
font-family: "宋体 "; 
font-size: 14px; 
line-height: 20px; 
font-weight: 600; 
color: #000000; 


.s4{ 
position: absolute; 
height: 70px; 
width: 175px; 
left: 755px; 
top: 535px; 
font-family: "隶书 "; 
font-size: 40px; 
font-weight: 600; 
color: #cc0000; 
filter: DropShadow(color= #333300, offX=3, offY= 3); 
} 
</style> 
</head> 
<body> 
<table width= "960" border= "0" cellpadding 
<<tr> 
<td height 一 "200" colspan="3"> <img src 一 "images/tp3-1.jpg” width= "960" height="200"> 
<p style 一 "position:absolute;top:55pxileft:279px;z-index:1;fontrsize:64pxi;color: # 990000; font- 
weigh:800;font-family :华文 新 魏 ;" 二 请 到 我 们 家 乡 来 二 /p 二 
<p style= "position:absolute; top: 53px; left:277px; z-index: 2;font-size:64px; color: # 990000; font- 
weigh:800;font-family :华文 新 魏 ;" 二 请 到 我 们 家 乡 来 二 /p> 
<p style= "position: absolute; top: 51px; left: 275px; z-index: 3; font-size: 64px; color: # ff0000; font- 
weigh:800;font-family: 华 文 新 魏 ;" 二 请 到 我 们 家 乡 来 <</p 二 
过 p class 二 "sl1" 之 请 到 我 们 家 乡 来 二/p 二 
</td> 
</t> 
<tr><td height="10" colspan="3"></td></tr> 
<tr> 
<td width= "160" valign= "middle" align= "center"> 
<p style= "font-size: 18px; "> 过 a href="prac3-1.html" target= "miframe" 之 城市 币 标 <</a 之 一 /p> 
<p style= "font-size: 18px;"><a href 一 "prac3-2. html" target 一 "miframe" 之 漓江 夜色 一 /a> 一 /p> 
<p styl font-size: 18px; "><a href 一 "prac3-3.html"” target 一 "miframe" 之 芦 笛 岩洞 一/a 之 </p> 
<p style= "font-size: 18px; "><a href 一 "prac3-4.html" target 二 "miframe" 这 龙 疹 梯田 =/a</p 
<p style= "font-size: 18px;"><a href="index.html" target=="_top"> 返 回首 页 </a></p> </td> 
=td width="540" height="400" > 
=<table border="3" bordercolor= "#66CCFF" width="540" height="400"> 


cellspacing= "0"> 
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<tr><td> 
<iframe src 一 "prac3-1. html" name="miframe" width = 533 height = 400 scrolling= no > 
</iframe> 
</td></tr> 
</table> 
</td> 
<td width="260" valign= "top"> 
过 p class 一 "s2" 过 家乡 桂林 一 /p> 
过 p class 一 "s3" 之 &nbsp;&nbsp;&nbsp; 我 的 家 乡 是 享有 "山水 甲 天 下 " 美 名 的 广西 桂林 .这 里 有 数 
不 尽 的 奇峰 溶洞 .美丽 如 画 的 漓江 ,神奇 美妙 的 芦 笛 岩 、 冠 岩 , 天 下 奇观 龙 背 梯 田 .请 到 我 们 家 乡 来 ,这 
里 的 景色 一 定 会 使 你 流连 忘 返 .过 /p 二 
过 p class 二 "s4" 志 我 的 家 乡 过 br 
一 欢迎 您 </p> 
</td> 
</t> 
</table> 
</body> 
</html> 


在 本 地 浏览 器 中 浏览 该 页 面 显示 效果 如 图 3-1 所 示 。 
3.8 小 结 


CSS 扩充 了 HTML 标记 功能 ,能 够 完成 网 页 元 素 的 三 维 精确 定位 以 及 特殊 效果 的 实 
现 。 本 章 主要 是 使 用 CSS 属性 和 CSS 滤 镜 完成 HTML 标记 不 能 完成 的 网 页 制作 。CSS 
在 网 页 设计 中 有 着 特殊 的 作用 ,灵活 使 用 CSS 是 网 页 制作 中 不 可 或 缺 的 技能 。 


3.9 习 题 


. CSS 样式 属性 中 ,常用 的 文字 大 小 单位 有 哪些 ? 

. 在 网 页 中 使 用 CSS 样式 的 方法 有 几 种 ? 举例 说 明 。 
. 如 何 实现 阴影 滤 镜 不 能 实现 的 文字 立体 效果 ? 

. 举例 说 明 background-position 属性 的 使 用 方法 。 

. 透明 滤 镜 中 的 style 属性 起 什么 作用 ? 

. 如 何 对 一 个 对 象 添 加 多 个 滤 镜 效果 ? 


3.10 实 训 :我 的 家 乡 ” 主 题 网 站 制作 


1. 实 训 目的 

熟悉 CSS 样式 表 的 使 用 ,练习 使 用 CSS 样式 表 制 作 网 页 。 

2. 实 训 任务 与 实 训 指导 

参照 教学 项 目 网 站 中 CSS 样式 栏目 内 容 与 效果 设计 ,以 “我 的 家 乡 ” 为 主题 ,从 Internet 
上 下 载 或 自己 采集 有 关 自 己 家 乡 的 若干 图 片 .仿照 3. 3 节 到 3.7 节 内 容 , 完 成 该 栏目 网 站 的 


en en 小 oo 性 
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制作 ,并 发 布 到 远程 Web 服务 器 网 站 中 。 栏 目标 题 ,导航 栏 内 容 需 要 根据 自己 设计 的 页 面 
内 容 自主 确定 。 


实 训 任务 3-1: 发 光 文 字 页 面 制作 


使 用 自 备 图 片 制作 实 训 网 站 项 目 中 带 发 光 文 字 页 面 prac3-1. html, 训 练 CSS 样式 及 发 
光 滤 镜 使 用 。 要 求 网 页 大 小 为 533X400px。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 家 乡 标志 性 图 片 tp3-3. jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac3-1. html 网 页 文件 。 

(3) 参照 3. 3 节 “ 城 市 徽标 "页面 代 码 , 完 成 该 页 面 的 制作 。 注 意 插入 图 片 要 使 用 如 下 
格式 : 


<img src="images/tp3-3.jpg" width="533" height="400"> 


如 果 不 指定 图 片 的 大 小 ,由 于 下 载 或 自己 采集 的 图 片 尺寸 不 合适 ,难以 保证 该 网 页 在 赔 
入 式 框架 中 显示 时 的 效果 。 

(4) 在 本 地 浏览 该 页 面 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac3-1. html 上 传 到 Web 服务 器 网 站 根 目录 下 ,将 图 片 tp3-3. jpg 
上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac3-1. html 


检查 网 站 发 布 是 否 正 确 。 
(7) 保存 本 地 站 点 。 


实 训 任务 3-2; 图 片 透明 效果 页 面 制作 


使 用 自 备 图 片 制 作 实 训 网 站 项 目 中 图 片 放射 状 透明 效果 显示 网 页 prac3-2. html, 训 练 
CSS 透明 滤 镜 使 用 。 要 求 网 页 大 小 为 533X400px。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 家 乡 风景 图 片 tp3-4. jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac3-2. html 网 页 文件 。 

(3) 参照 3.4 节 * 漓 江 夜 色 ” 页 面 代码 ,完成 该 页 面 的 制作 。 注 意 插入 图 片 要 使 用 ， 

<img src 一 "images/tp3-4.jpg" width 一 "533"” height 一 "400" > 
为 图 片 指定 显示 大 小 。 

(4) 在 本 地 浏览 该 页 面 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac3-2. html 上 传 到 Web 服务 器 网 站 根 目录 下 ,将 图 片 tp3-4. jpg 
上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 

http://Web 服务 器 域名 地 址 /学 号 /prac3-2. html 


检查 网 站 发 布 是 否 正 确 。 
(7) 保存 本 地 站 点 。 
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实 训 任务 3-3: 带 边 框图 片 页 面 制作 


使 用 自 备 图 片 制 作 实 训 网 站 项 目 中 带 边 框图 片 网 页 prac3-3. html, 训 练 CSS 边框 、 定 
位 属性 。 要 求 网 页 大 小 为 533X 400px。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 2 张 家 乡 风景 图 片 tp3-5. jpg、tp3-6. jpg。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac3-3. html 网 页 文件 。 

(3) 参照 3.5 节 “ 芦 第 岩 洞 " 页 面 代码 ,完成 该 页 面 的 制作 。 注 意 插入 图 片 要 使 用 : 


<img src= "images/tp3-5.jpg" width="267" height="200" class="s1" > 

<img src= "images/tp3-6.jpg" width="267" height="200" class="s2"> 
为 图 片 指定 显示 大 小 。 

(4) 在 本 地 浏览 该 页 面 ,查看 页 面 显 示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac3-3. html 上 传 到 Web 服务 器 网 站 根 目 录 下 ,将 图 片 tp3-5. jpg、 
tp3-6.jpg 上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac3-3. html 


检查 网 站 发 布 是 否 正确 。 
(7) 保存 本 地 站 点 。 


实 训 任务 3-4; 指定 区 城 显 示 文 字 页 面 制 作 


使 用 自 备 图 片 制作 实 训 网 站 项 目 中 指定 区 域 显示 文字 页 面 prac3-4. html, 训 练 CSS 定 
位 属性 。 要 求 网 页 大 小 为 533X400px。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 家 乡 风景 图 片 tp3-7. jpg。 

(2) 使 用 “记事 本 "在 本 地 站 点 文件 夹 中 生成 prac3-4. html 网 页 文件 。 

(3) 参照 3.6 节 “ 龙 峭 梯 田 " 页 面 代码 ,在 图 片上 的 指定 位 置 显示 介绍 该 图 片 的 文字 , 完 
成 该 页 面 的 制作 。 注 意 插入 图 片 要 使 用 : 


<img src= "images/tp3-7.jpg" width="533" height="400"> 


为 图 片 指定 显示 大 小 。 

(4) 在 本 地 浏览 该 页 面 ,查看 页 面 显示 是 否 符合 设计 要 求 。 

(5) 使 用 FTP 工具 将 prac3-4. html 上 传 到 Web 服务 器 网 站 根 目录 下 ,将 图 片 tp3-7. jpg 
上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 

http://Web 服务 器 域名 地 址 /学 号 /prac3-4. html 


检查 网 站 发 布 是 否 正确 。 
(7) 保存 本 地 站 点 。 


实 训 任务 3-5， 我 的 家 乡 " 栏目 首页 制作 
仿照 教学 项 目 网 站 中 CSS 栏目 首页 效果 设计 ,使 用 自己 准备 的 素材 ,完成 以 “我 的 家 
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乡 ” 为 主题 的 实 训 网 站 项 目 “ 我 的 家 乡 " 栏 目 首页 prac3. html 的 制作 ,并 将 prac3-1. html、 
prac3-2. html、prac3-3. html、prac3-4. html 链接 到 栏目 首页 中 ,在 栏目 首页 的 嵌入 式 框 架 中 
显示 。 训 练 嵌 入 式 框架 布局 ,立体 效果 文字 制作 .CSS 属性 及 滤 镜 的 使 用 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 2 张 家 乡 风景 图 片 tp3-1. jpg、tp3-2. jpg,tp3-1. jpg 
应 该 是 一 张 有 水 面 景色 的 图 片 。 

(2) 使 用 “记事 本 ”在 本 地 站 点 文件 夹 中 生成 prac3. html 网 页 文件 。 

(3) 参照 该 栏目 首页 布局 与 效果 设计 以 及 3.7 节 中 的 页 面 代码 ,完成 栏目 首页 页 面 制 
作 。 要 求 该 页 面 中 必须 使 用 嵌入 式 框 架 , 有 立体 效果 文字 ,要 使 用 发 光 滤 镜 、 透 明 滤 镜 、 阴 影 
滤 镜 ,投影 滤 镜 和 制作 带 图 片 背 景 的 文字 。 注 意 “ 返 回首 页 ” 超 链接 的 target 属性 要 使 
“_parent” 或 “top” 等 ,其 他 超 链接 的 target 属性 要 使 用 嵌入 式 框架 名 。 

(4) 在 本 地 浏览 该 页 面 ,查看 页 面 显 示 是 否 符合 设计 要 求 ,查看 所 有 超 链 接 是 否 正确 。 

(5) 使 用 FTP 工具 将 prac3. html 上 传 到 Web 服务 器 网 站 根 目录 下 ,将 图 片 tp3-1. jpg、 
tp3-2.jpg 上 传 到 Web 服务 器 网 站 Images 文件 夹 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 


在 网 站 首页 中 单 击 “CSS 样式 ” 超 链接 按钮 ,检查 prac3. html 网 页 能 否 正确 显示 ,检查 
prac3. html 网 页 中 的 超 链 接 是 否 正确 。 
(7) 保存 本 地 站 点 。 


世上 站 


使 用 Dreamweaver 制作 网 页 


本 章 介绍 如 何 使 用 网 页 编辑 工具 Dreamweaver 制作 网 页 。 本 章 完成 的 内 容 是 教学 项 
目 网 站 中 的 “网 页 编辑 工具 ”栏目 制作 。 


4.1 “网 页 编辑 工具 ”栏目 设计 


4.1.1 栏目 内 容 与 效果 设计 

1. 栏目 首页 内 容 与 效果 设计 

该 栏目 设计 为 以 介绍 网 页 编辑 工具 Dreamweaver 的 使 用 为 主题 的 网 站 。 栏 目 首页 内 
容 与 效果 设计 如 图 4-1 所 示 。 


个 网 页 编辑 工具 


2011 年 11 月 16 日 


版 可 所 有 : 石家庄 断 电 职 册 接 相 学 院 计算 机 系 计 123 星 孙 修 了 和 和 联系 : 
图 4-1 栏目 首页 设计 


标题 栏 尺寸 为 960X160px, 背 景 图 片 使 用 images/tp4-1. jpg, 文 字 为 “方正 每 体 ”, 大 小 
为 2cm; 白 色 , 居 中 对 齐 ; 
导航 栏 尺寸 为 960 X 50px, 背景 图 片 使 用 images/tp4-2-1. jpg, 文 字 为 “黑体 ”, 大 小 为 
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14px, 颜 色 使 用 “#006699”, 居 中 对 齐 。 

其 中 超 链接 如 下 。 

(1) 首页 :链接 到 index. html。 

(2) Dreamweaver 简介 : 链接 到 prac4-1. html, 在 窗口 宽度 为 960px 的 窗口 中 打开 。 

(3) 层 与 行为 : 链接 到 prac4-2. html, 在 980X620px 的 窗口 中 打开 。 

(4) 热点 图 像 : 链接 到 prac4-3. html, 在 新 窗口 打开 。 

导航 栏 后 面 是 当前 的 系统 日 期 ,是 用 JavaScript 脚本 实现 的 。 

网 页 主体 部 分 是 960 X 400px 带 边框 的 表格 ,边框 宽度 为 5px, 边 框 颜 色 为 #006600。 
网 页 主体 部 分 左边 图 片 为 images/tp4-3. jpg, 显 示 为 放射 状 半 透 明 效果 的 “交换 图 像 ”, 当 鼠 
标 移动 到 该 图 片上 方 时 会 显示 交换 图 片 images/tp4-4. jpg, 鼠标 移 开 后 恢复 显示 图 片 
images/tp4-3. jpg。 

网 页 主体 部 分 右边 上 方 是 尺寸 为 410X90px 的 Flash 动画 flashesNfl4-1. swf; 下 方 是 
一 个 GIF 动画 images/tp4-5. gif 。 

网 页 最 下 面 一 行为 960X40px 的 版 权 信息 区 间 ,背景 使 图 片 用 images/tp4-2. jpg。 

2. Dreamweaver 简介 页 面 设计 

Dreamweaver 简介 页 面 内 容 与 效果 设计 如 图 4-2 所 示 。 


入 无 标题 文档 - Wicrosoft Internet Explorer 
文件 中。 遍 格 @) 查看 Y) 收 诚 和 ) 工具 W) 帮助 如 


d LfREAVWEAvYE Mm ed : 


人 Dreanweaver 和 专业 图 像 处 理工 具 


Fireworks、 二 维 动 国 制作 工具 Flasb 被 成 Ee 区 mi Dr' 
队 )，pxeanweaver 主 要 帮助 用 户 生 成 HDL、 还 集成 了 “ 层 ” 
工具 ， 使 用 层 可 以 减少 书写 CS5 代 码 完成 网 各 et 啤 

月 ，Nacromedis 公 司 被 Adobe 公 司 以 约 34 亿 美元 的 价格 收购 ， 然 后 Adobe 公 司 推出 了 图 形 设计 、 
te ee (Creative Suite) ， 所 有 的 软件 版 本 称 为 Cs 版 ， 目 前 较 高 的 版 本 为 CS5， 


在 Dreanveaver CS 艇 本 中 删除 了 时 间 铀 动画 、 框 架 市 局 、F1ash 按 钮 等 内 容 ， 不 再 使 用 常用 工具 栏 ， 加 强 
TT J 的 支持 ， 加 强 了 Javascript 程 序 库 ( 称 作 Spry 框架 ) 。 er 选项 卡 和 扩 盘 
在 Dreamweaver CS 版本 中 居 称 作 如 iv 在 行为 中 不 仅 可 以 对 时 元 素 进 行 处 理 ， 所 有 的 网 页 元 素 都 可 以 进行 处 理 ， 


4-2 Dreamweaver 简介 页 面 设计 


页 面 标题 设 为 使 用 阴影 滤 镜 效果 的 “华文 新 魏 ” 文 字 , 颜 色 为 “#0000b3”, 阴 影 颜色 为 
“ 井 6666ff”, 大 小 为 2cm。 页 面 标题 背 景 图 片 为 images/tp4-1-2. jpg。 

页 面 中 的 图 片 为 images/tp4-6. jpg。 

3. 层 与 行为 页 面 设 计 

层 与 行为 页 面 内 容 与 效果 设计 如 图 4-3 所 示 。 

页 面 顶部 为 Flash 动画 ,使 用 素材 flashes/fl4-2. swf; 页 面 右 侧 为 图 片 images/tp4-11. jpg， 
图 片 替代 文本 为 “新 加 坡 国家 植物 园 *。 当 鼠标 移动 到 左 侧 超 链接 文本 * 胡 姬 花 1 号 ”及 其 他 
5 个 超 链接 文本 上 面 时 ,在 images/tp4-11. jpg 位 置 分 别 显 示 images/tp4-3. jpg、images/ 
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ED 


| 必 村 民 标 指向 “ 衣 最 论 x 叶 ”可 以 看 有 不 9 胡扯 论 


图 4-3 层 与 行为 页 面 设计 


tp4-4. jpg ,images/tp4-7. jpg images/tp4-8. jpg images/tp4-9. jpg images/tp4-10. jpg 图 
片 ,鼠标 离开 后 ,恢复 显示 images/tp4-11. jpg 图 片 。 

页 面 左 侧 文本 * 胡 姬 花 ? 为 2cm 绿色 “华文 彩云 "文字 ; 超 链接 文本 大 小 为 20px。 说 明 
文字 是 颜色 为 “# 009999”、16px 默认 字体 的 文本 ,文字 内 容 为 : 

在 新 加 坡 国家 植物 园 内 ,有 3 千 多 种 胡 姬 花 。 胡 姬 花 是 东南 亚 一 带 人 们 对 兰花 的 称呼 ， 
例如 我 们 常见 的 蝴蝶 兰 。 

新 加 坡 国家 植物 园 内 的 胡 姬 花 品种 在 世界 上 是 最 多 的 ,而 且 很 多 新 品种 都 是 他 们 自己 
培育 的 ,很 多 胡 姬 花 的 名 字 是 用 名 人 的 名 字 命 名 的 ,所 以 一 般 人 叫 不 出 这 些 胡 姬 花 的 名 字 。 

下 面 使 用 编号 来 表示 胡 姬 花 的 种 类 ,使 用 鼠标 移动 到 某 个 编号 上 ,你 就 可 以 欣赏 到 该 编 
号 的 胡 姬 花 。 

页 面 底部 的 状态 栏 中 显示 的 文字 为 : 

将 所 标 指向 “ 胡 姬 花 义 号 ”, 可 以 看 到 不 同 的 胡 姬 花 。 

4. 热点 图 像 页 面 设计 

热点 图 像 页 面 内 容 及 显示 效果 设计 如 图 4-4 所 示 。 

页 面 标题 “ 赏 花 ”为 25mm 大 小 、 素 书 字体 ,颜色 为 # FF6600, 带 阴影 效果 的 文字 。 阴 影 
颜色 为 #996600。 

水 平 线 宽度 为 窗口 的 80% , 宽 8px, 颜 色 为 #00cc00。 

页 面 左 下 方 为 图 片 images/tp4-12. jpg。 该 图 片 中 有 9 种 胡 姬 花 , 当 鼠标 指向 该 图 片 中 
的 某 个 胡 姬 花 时 ,在 右面 区 域 将 显示 该 花 放 大 的 图 片 。 
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要 无 标题 文 梢 - 了 crosol ft Internet Explorer 
文件 中 蝙 辑 下 ) 可 看) 收藏 四 工具 CD) 种 动 o 


当 你 的 面 图 : 中 有 个 花 上 面 
时 ， 右 面 会 显示 该 花 放大 的 图 上 


图 4-4 热点 图 像 页 面 设计 


4.1.2 页 面 文 件 名 设计 


栏目 首页 文件 名 : prac4. html; 

Dreamweaver 简介 页 面 文件 名 : prac4-1. html; 
层 与 行为 页 面 文件 名 : prac4-2. html; 

热点 图 像 页 面 文件 名 : prac4-3. html。 


4.2 网 页 编辑 工具 Dreamweaver 


4.2.1 Dreamweaver 概述 


Dreamweaver 是 由 Macromedia 公司 开发 的 一 款 可 视 化 的 网 页 编辑 工具 。Dreamweaver 和 
专业 图 像 处 理工 具 Fireworks、 二 维 动画 制作 工具 Flash 被 称 为 网 页 设计 三 剑客 ,三 者 被 
Macromedia 公司 称 为 Dreamteam( 梦 之 队 ) 。 在 静态 网 站 制作 中 .Dreamweaver 主要 帮助 用 
户 生成 HTML .CSS 代码 以 及 JavaScript 脚本 。Dreamweaver 中 还 集成 了 “ 层 ” 布 局 工具 ， 
使 用 层 可 以 减少 书写 CSS 代码 ,完成 网 页 三 维 布局 。Macromedia 公司 开发 的 三 剑客 最 高 
版 本 为 8.0 版 。 

2005 年 4 月 ,Macromedia 公司 被 Adobe 公司 以 约 34 亿美 元 的 价格 收购 ,然后 Adobe 
公司 推出 了 图 形 设 计 、 影 像 编辑 与 网 络 开发 的 软件 创意 组 合 (Creative Suite) 软 件 产品 ,所 有 
的 软件 版 本 称 为 CS 版 ,目前 较 高 的 版 本 为 CS5。 

在 Dreamweaver CS 版 本 中 删除 了 时 间 轴 动画 、 框 架 布局 ,Flash 按钮 等 内 容 ; 将 “ 插 
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入 ” 栏 放 入 了 面板 组 内 ; 加强 了 对 动态 网 站 开发 工具 和 对 数据 库 、XML 的 支持 ; 加 强 了 
JavaScript 程序 库 ( 称 作 Spry 框架 )。 使 用 Spry 可 以 方便 地 生成 下 拉 式 菜单 栏 . 选 项 卡 和 
折 释 式 面板 等 。 在 Dreamweaver CS 版 本 中 层 称 作 “AP div”; 在 行为 中 ,行为 对 象 不 仅 可 以 
是 层 元 素 , 还 可 以 是 所 有 的 网 页 元 素 。 

使 用 Dreamweaver 可 以 实现 网 页 的 可 视 化 设计 制作 。 该 工具 主要 具有 以 下 几 个 方面 
的 功能 。 

(1) 站 点 管理 功能 。 帮 助 用 户 建立 和 管理 本 地 站 点 ,实现 和 远程 站 点 的 文档 上 传 与 下 载 。 

(2) HTML 标记 生成 功能 。 用 户 可 以 通过 对 菜单 .工具 按钮 .对 话 框 \ 属 性 面板 的 操作 
完成 HTML 标记 及 其 属性 的 设置 。 

(3) CSS 样式 生成 与 管理 。 在 Dreamweaver 中 ,几乎 所 有 格式 都 是 使 用 CSS 定义 的 。 
使 用 属性 面板 和 CSS 面板 都 可 以 很 方便 地 生成 和 编辑 CSS 样式 。 

(4) 生成 JavaScript 代码 。 用 户 不 必 了 解 JavaScript 脚本 技术 就 能 使 用 Dreamweaver 
中 的 “行为 ”生成 JavaScript 脚本 代码 ,完成 DHTML 的 功能 。 

Dreamweaver 最 主要 的 功能 是 站 点 管理 和 帮助 用 户 书 写 HTML 标记 与 设置 标记 属 
性 。 从 某 种 意义 上 说 ,没有 HTML 和 CSS 基础 ,使 用 Dreamweaver 也 能 够 设计 制作 网 页 ， 
但 是 ,如 果 熟 悉 HTML 标记 和 CSS ,那么 学 习 Dreamweaver 将 是 一 个 非常 简单 的 事情 ,而 
且 , 所 有 网 页 编辑 工具 都 不 能 完全 解决 HTML 标记 和 CSS 能 够 解决 的 问题 ,很 多 情况 还 是 
需要 用 户 直 接 编辑 HTML 标记 。 

在 Dreamweaver CS 版 本 中 ,主要 加 强 了 对 动态 网 站 技术 的 支持 。 对 于 比较 简单 的 静 
态 网 站 ,使 用 较 高 版 本 的 Dreamweaver 反而 会 有 很 多 不 便 。 例 如 在 Dreamweaver CS5 版 本 
中 ,文本 属性 中 去 掉 了 超 链接 等 属性 ,框架 布局 也 不 支持 了 等 。 所 谓 不 支持 ,并 不 是 说 在 该 
版 本 中 不 能 使 用 了 ,而 是 需要 用 户 自己 去 书写 HTML 代码 ,所 以 在 制作 静态 网 页 时 ,如 果 
对 下 拉 式 菜单 .三维 页 面 布 局 技术 要 求 不 高 ,可 以 考虑 尽量 使 用 较 低 版 本 的 Dreamweaver， 
例如 中 文 Dreamweaver 8. 0。 


4.2.2 ”Dreamweaver 工作 窗口 


图 4-5 是 中 文 Dreamweaver 8.0 的 工作 窗口 。 

中 文 Dreamweaver 8.0 的 工作 窗口 主要 由 菜单 栏 “ 插 入 ” 栏 “ 文 档 " 窗 口 “ 属 性 ”检查 
器 和 面板 组 构成 ,其 中 菜单 栏 中 包括 了 Dreamweaver 所 有 的 操作 项 目 。“ 插 入 ” 栏 是 一 组 下 
拉 列 表 式 工具 栏 ,用 于 将 各 种 类 型 的 “对 象 "插入 到 文档 中 。“ 文 档 窗 口 是 显 示 当 前 创建 的 
文档 和 编辑 当前 文档 的 场所 。“ 文 档 ” 窗 口上 方 为 "文档 工具 栏 。 根 据 “ 文 档 ? 工 具 栏 的 “ 代 
码 ”“ 拆 分 ”“ 设 计 ” 视 图 选择 ,“ 文 档 ” 窗 口 有 设计 窗口 .代码 窗口 和 拆 分 窗口 3 种 形式 。 在 
设计 窗口 中 ,可 以 实现 可 视 化 的 设计 方式 ,通过 直接 书写 ,插入 、 属 性 面板 操作 等 方式 完成 页 
面 设计 制作 ; 在 代码 窗口 中 ,可 以 通过 书写 HTML 代码 的 方式 制作 网 页 文档 ,一 般 在 代码 
窗口 中 只 是 修改 HTML 标记 ; 拆 分 窗口 是 设计 窗口 和 代码 窗口 的 组 合 形式 ,可 以 同时 查看 
代码 与 设计 效果 。 

“文档 ”工具 栏 如 图 4-6 所 示 。 

“文档 ”工具 栏 中 常用 的 项 目 是 “代码 ”“ 拆 分 ”“ 设 计 ” 视 图 转换 ;“ 文 档 标题 "用 于 设置 
HTML <title> 标 记 内 容 ;“ 在 浏览 器 中 浏览 /调试 ?按钮 用 于 预览 网 页 效果 。 
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“插入 性 


菜单 栏 “文档 "工具 栏 "文档 窗口 面板 组 


人 macroeedis Dreamrearer 8 - [atitlet-l OOIILD 了 


文件 四 | 编辑 外 查看 名 | 插入 0) 修改 是 文本 加 命令 人) | 站 点 G) 窗口 帮助 t 
国 国 入 |[ 太 |]#| 可 | 信和 宏 | 芋 侠 高 富 四 - 较 


标签 选择 器 “属性 "检查 器 状态 栏 “文件 "面板 
4-5 ”中文 Dreamweaver 8.0 工作 窗口 


显示 代码 视 检查 错误 刷新 设计 视图 


显示 代码 和 设计 视图 验证 标记 
显示 设计 视图 文件 管理 | 视图 选项 


可 视 化 助理 
文档 标题 在 浏览 器 中 浏览 /调试 


4-6 “文档 "工具 栏 
“文档 ”窗口 底部 的 状态 栏 提供 与 当前 文档 有 关 的 其 他 信息 。 状 态 栏 如 图 4-7 所 示 。 
文档 大 小 和 估计 的 下 载 时 间 


设置 缩放 比 例 
标签 选择 器 缩放 工具 


4-7 状态 栏 
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标签 选择 器 : 标签 即 标记 。 单 击 标签 可 以 选择 该 标签 及 其 全 部 内 容 。 例 如 单 击 
到 body> 可 以 选择 文档 的 整个 正文 ; 单 击 一 img 之 可 以 选择 该 标记 中 的 图 像 。 右 击 某 个 标 
签 从 弹出 菜单 中 可 以 选择 “删除 标签 "“ 设 置 类 ”( 为 标签 指定 CSS 的 类 样式 ) 等 命令 。 

选取 工具 : 用 于 选取 窗口 中 的 对 象 与 手 形 工具 为 互 锁 工 具 。 

手 形 工具 : 用 于 将 其 他 文档 拖 到 “文档 "窗口 中 ,但 不 能 选择 窗口 中 的 对 象 。 

缩放 工具 : 用 于 对 窗口 的 放大 或 缩小 (缩小 : 加 Alt 键 ) 。 

设置 缩放 比例 : 以 菜单 方式 设置 窗口 的 放大 或 缩小 比例 。 

窗口 大 小 : 显示 当前 窗口 的 大 小 。 

文档 大 小 和 估计 下 载 时 间 : 当前 文档 的 大 小 和 使 用 56Kbps 的 Modem 时 打开 网 页 需 
要 的 时 间 。 

“属性 ”检查 器 用 于 检查 ,设置 当前 选 定 页 面 元 素 的 属性 。“ 属 性 ”检查 器 中 的 内 容 根据 
选 定 的 元 素 不 同 而 不 同 。 

面板 组 是 组 合 在 一 个 标题 下 面 的 相关 面板 的 集合 ,其 中 “文件 ”面板 类 似 于 Windows 
资源 管理 器 。 若 要 展开 一 个 面板 ,可 以 单 击 名 称 左 侧 的 展开 箭头 ; 若 要 折 全 一 个 面板 ,可 以 
单 击 名 称 左 侧 的 折 双 箭头。 在 面板 组 中 的 面板 只 是 Dreamweaver 面板 的 一 部 分 ,如 果 需 其 
他 面板 可 以 在 “窗口 "菜单 中 选择 。 

图 4-8 是 Dreamweaver CS5 的 工作 窗口 。 从 图 中 可 以 看 到 属性 窗口 、 面 板 组 都 简化 了 
很 多 ,主要 的 改进 是 加 强 了 对 数据 库 .XML 的 支持 ,增强 了 制作 动态 网 站 的 功能 。 


| 

IEa | 
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4-8 ” Dreamweaver CS5 的 工作 窗口 


4.2.3 ” Dreamweaver 站 点 管理 
Dreamweaver 具有 强大 的 站 点 管理 功能 。 在 Dreamweaver 中 创建 或 打开 站 点 之 后 ， 
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Dreamweaver 会 自动 将 链接 到 站 点 目录 之 外 的 文件 复制 到 站 点 目录 中 ,所 有 链接 地 址 均 自 
动 采用 相对 路 径 , 避 免 发 生 超 链 接 错 误 。Dreamweaver 能 够 很 好 地 管理 本 地 与 远程 站 点 ， 
实现 本 地 站 点 与 远程 站 点 之 间 的 上 传 和 下 载 ,能 够 很 方便 地 完成 网 站 的 发 布 与 网 站 维护 。 

1. 创建 站 点 

在 Dreamweaver 中 使 用 “站 点 ”|“ 新 建站 点 "菜单 项 ,打开 “站 点 定义 ”对 话 框 。 低 版 本 
的 Dreamweaver 中 “站 点 定义 ”对 话 框 有 “基本 ”与 “高 级 ”两 个 选项 卡 。“ 基 本 ”选项 卡 提供 
“站 点 定义 向 导 ”,Dreamweaver CS 版 本 中 不 再 提供 “站 点 定义 向 导 ”。 

(1) 站 点 本 地 信息 设置 。 低 版 本 的 Dreamweaver 中 “站 点 定义 ”对 话 框 “ 高 级 ”选项 卡 
“本 地 信息 ”的 设置 对 话 框 如 图 4-9 所 示 。 


| 


站 点 名 称 中 ; 
本 地 根 交 件 末 外) 尼 : \jx2008\ 未 命名 站 点 1 加 
忆 自动 刷新 本 地 文件 列表 到 ) 


Contribute 


默认 图 重文 件 夹 江 ) 


链接 相对 于 : C 文档 血 ) 个 站 点 根 目录 @) 
TP 地 址 0: [http:// 


me 


区 分 大 小 写 的 链接 : 厂 使 用 区 分 大 小 写 的 妊 接 检查 QD) 


DD 


图 4-9 “站 点 定义 ”本 地 信息 对 话 框 


在 “本 地 信息 ”对 话 框 中 ,主要 设置 的 内 容 如 下 。 

@ 站 点 名 称 : 本 地 站 点 的 名 称 , 一 般 不 重要 。 

@ 本 地 根 文件 夹 : 网 页 文件 存放 的 文件 目录 ,是 站 点 内 所 有 文件 目录 的 根 目录 。 

Dreamweaver CS 版 本 中 设置 本 地 站 点 在 “站 点 ”选项 卡 中 设置 。 

(2) 站 点 远程 信息 设置 。 低 版 本 的 Dreamweaver 中 “远程 信息 ”的 设置 对 话 框 如 图 4-10 所 
示 。 在 本 地 开发 网 站 时 ,可 以 不 设置 “远程 信息 ”。 如 果 需 要 将 网 站 发 布 到 Web 服务 器 上 ， 
“访问 "方式 需要 选择 “FTP”, 并 且 需 要 设置 FTP 主机 的 域名 或 卫 地 址 .主机 目录 ( 即 远程 
站 点 中 的 子 目录 ,如 果 主 机 目录 为 远程 站 点 中 的 根 目 录 , 主 机 目录 不 需要 设置 ) 用户 的 
登录 名 称 和 登录 密码 。 最 后 单 击 “ 测 试 ”按钮 ,如 果 能 和 远程 站 点 链接 ,那么 远程 设置 就 
成 功 了 。“ 启 用 存 回 和 取出 ”用 于 多 人 维护 网 站 的 情况 ,只 有 他 人 存 回 之 后 才 可 能 被 取出 。 
Dreamweaver CS 版 本 中 设置 “远程 信息 ”如 图 4-11 所 示 。 选 择 “ 服 务 器 ”选项 卡 , 单 击 “ 添 加 
新 服务 器 ”按钮 ,在 配置 服务 器 的 “基本 ”选项 卡 中 填写 FTP 参数 即 可 。 

2. 管理 本 地 站 点 

在 Dreamweaver 中 使 用 “站 点 "1“ 管 理 站 点 "菜单 项 ,可 以 完成 站 点 的 “编辑 "“ 删 除 ”等 
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添加 新 服务 器 
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操作 。 

3. 文件 的 上 传 和 下 载 

本 地 站 点 与 远程 站 点 之 间 的 网 页 文档 上 传 和 下 载 可 以 通过 “文件 ”面板 中 的 “上 传 ”“ 下 
载 ”按钮 完成 。 上 传 和 下 载 的 内 容 可 以 是 整个 网 站 内 容 或 选择 的 部 分 文件 。 如 果 网 站 启用 
了 “启用 存 回 和 取出 ” 复 选 框 ,那么 文件 的 上 传 和 下 载 需 要 使 用 “取出 ”“ 存 回 ” 按 钮 。“ 文 件 ” 
面板 中 的 “上 传 ”"“ 下 载 " 按 钮 如 图 4-12 所 示 。 

上 传 可 以 选择 整个 站 点 或 某 个 文件 。 如 果 上 传 一 个 网 页 文件 ,系统 会 提示 “要 上 传 相关 
文件 ?”, 回 答 “ 是 ”之 后 ,该 网 页 中 使 用 的 图 片 等 文件 都 会 上 传 到 服务 器 上 。 
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4.2.4 页 面 属性 


在 Dreamweaver 中 ,文档 元 素 的 格式 一 般 使 用 CSS 样 站 点 列表 取出 存 回 
式 和 无 样式 。 所 谓 无 样式 就 是 文档 页 面 属性 设置 的 样式 。 spr || 
或 者 说 默认 样式 。 没 有 进行 页 面 属性 设置 时 ,系统 默认 样 花生 到 tai 
式 是 由 系统 参数 定义 的 ,系统 参数 可 以 在 菜单 “编辑 "|“ 首 
选 参 数 ”中 修改 。 在 设置 了 “页 面 属性 "后 ,系统 默认 样式 由 7 
“页 面 属性 "定义 。 ge enn epee i ee 
的 “页 面 属性 "按钮 ,打开 * 页 面 属性 ”对话 框 进行 设置 。 
面 属 性 ”设置 包括 * ee hon ga 图 412 “上 传 和 下载 "按钮 
“跟踪 图 像 * 设 置 。 


1.“ 外 观 " 设 置 
“外 观 ” 设 置 对 话 框 如 图 4-13 所 示 。 
EE 
分 类 外 观 
mis || 
Fe 大 小 | 司 赔 案 Ga 二 
XxkaeOE 
BRE 
到 景 轿 借 DD): 厂 ” 
| 可 


去 边 距 四: 估计 bz) 了 直下 @): 俐 素 Gxz) 二 
上 上边 距 @): 党 率 x] 了 下 边 距 人 @); 像素 x】 二 


取消 应 用 的 ) 帮助 | 


图 4-13 “外 观 ”设置 对 话 框 


在 外观? 设置 对 话 框 中 通过 页 面 字 体 , 大 小 \ 文 本 颜色 列表 框 可 以 选择 设置 页 面 和 表格 
中 的 默认 的 文本 字体 、 大 小 、 粗 体 、 斜 体 、 颜 色 。 

“页 面 字 体 ” 的 设置 可 以 通过 下 拉 列 表 框 选择 。 如 果 在 下 拉 列 表 框 的 列表 项 中 没有 需要 的 
字体 ,可 以 单 击 列表 框 中 的 “编辑 字体 列表 ”项 ,打开 “编辑 字体 列表 ”对 话 框 ,如 图 4-14 所 示 。 

在 “可 用 字体 ”列表 框 中 选择 需要 的 字体 , 单 击 “ 国 ” 按 钮 ,将 选择 字体 添加 到 “选择 的 字 
体 ” 列 表 框 中 , 单 击 “确定 "按钮 ,选择 字体 进入 “字体 列表 ” 框 中 ,在 “页 面 字 体 ” 设 置 中 就 可 
以 使 用 了 。 不 过 “编辑 字体 列表 ”每 次 只 能 添加 一 种 字体 (一 行 中 有 多 种 字体 时 ,优先 使 用 排 
列 在 前 面 的 字体 )。 添 加 多 行 字体 需要 多 次 进入 “编辑 字体 列表 ”对 话 框 。 

在 “外 观 ” 设 置 对 话 框 中 通过 “背景 颜色 ”“ 背 景 图 像 *“ 重 复 ” 列 表 框 和 文本 框 设置 页 面 
的 背景 颜色 、 背 景 图 像 以 及 背景 图 像 重 复方 式 。 背景 图 像 可 以 使 用 浏览 方式 选择 。 

通过 “外 观 ” 设 置 对 话 框 中 的 左边 距 , 右 边 距 、 上 边 距 、 下 边 距 文本 框 可 以 设置 页 面 的 上 
下 左右 边 距 。 
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图 4-14 “编辑 字体 列表 ”对 话 框 


2.“ 链 接 ” 设 置 

“链接 ”设置 用 于 定义 超 链接 标记 的 样式 ,包括 字体 、 大 小 、 各 种 状态 的 颜色 和 下 划 线 的 
样式 。 为 了 避免 他 人 对 页 面 超 链接 的 误解 ,一 般 不 要 自己 设置 超 链接 的 样式 。 

3.“ 跟 踪 图 像 ”设置 

用 于 设置 页 面 的 跟踪 图 像 (设计 底 图 ) 以 及 图 像 的 透明 度 。 


4.2.5 CSS 样式 定义 与 管理 


在 Dreamweaver 中 ,页 面 元 素 格式 一 般 都 采用 CSS 样式 进行 定义 。 掌 握 CSS 样式 的 
定义 与 管理 是 使 用 Dreamweaver 的 基本 技术 。 

1. CSS 样式 定义 

在 Dreamweaver 中 定义 CSS 样式 有 下 面 几 种 方式 。 

(1) 在 文档 * 属 性 ?面板 中 设置 文本 CSS 样式 。 在 文档 “属性 ”面板 中 ,选中 某 些 文本 后 ， 
只 要 对 “字体 *"“ 大 小 ”和 “颜色 ”属性 对 话 框 中 的 某 个 内 容 进 行 修改 , 便 可 以 定义 一 个 新 的 样 
式 , 样 式 名 称 就 会 显示 在 “样式 ”列表 框 中 。 样 式 名 称 是 全 局 格式 页 的 “类 ”名称 ,自动 取 名 为 
stylel ,style2,…。 如 果 属 性 定义 与 以 前 定义 过 的 内 容 相 同 , 就 不 会 产生 新 的 样式 。 

(2) 使 用 “新 建 CSS 规则 ?对 话 框 创建 CSS 样式 。 在 如 图 4-15 所 示 的 “CSS 样式 ”面板 
中 单 击 “ 新 建 CSS 规则 ”按钮 ,可 以 打开 “新 建 CSS 规则 ”对 话 框 ,如 图 4-16 所 示 。 


backgr ond 
backgr ound-attachment 
backgr ound-color 
backgr ound-inage 
becker ond- position 司 


和 [si 出 除 CSS 规 则 
附加 样式 表 
新 建 CSS 规 则 编辑 CSS 样 式 


图 4-15 “CSS 样式 ”面板 
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名 称 : 了 
定义 在 : 广 | 声 建 样式 表 文件 ) 引 
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天 助 | 
图 4-16 “新 建 CSS 规 则 ”对 话 框 


在 “新 建 CSS 规则 ”对 话 框 中 ,“ 选 择 器 类 型 "有 “类 ”“ 标 签 " 和 “高 级 ”选项 。“ 类 ”可 以 
应 用 于 任何 标签 ;“ 标 签 ”定义 HTML 标签 的 外 观 样 式 ;“ 高 级 "用 于 定义 超 链接 标记 样式 
等 。 一 般 常用 的 是 “类 ”定义 。 

在 选择 “类 ”时 ,在 “名 称 ” 文 本 框 中 需要 输入 一 个 类 名 称 。 类 名 称 前 级 “. ”是 需要 的 ,省 
略 时 系统 会 自动 加 入 。 

“定义 在 ”选项 用 于 选择 CSS 样式 是 “ 仅 对 该 文档 ”的 全 局 格式 页 ,还 是 存放 在 外 部 样式 
表 文 件 中 。 如 果 选 择 “ 定 义 在 ”, 那 么 需要 在 下 拉 列 表 框 中 输入 或 选择 一 个 样式 表 文件 名 。 
如 果 选 择 了 “新 建 样式 表 文 件 ”, 单 击 “ 确 定 ” 按 钮 后 ,系统 打开 “保存 样式 表 文 件 ”对话 框 ,从 
中 选择 存放 路 径 和 指定 样式 表 文 件 名 (扩展 名 为 .CSS) 保 存 即 可 。 

在 完成 上 述 操作 之 后 ,系统 打开 “CSS 规则 定义 对话 框 ,在 该 对 话 框 中 可 以 通过 下 拉 
列表 框 选择 、 复 选 框 选择 ,浏览 和 文本 框 输入 方式 直观 地 设置 CSS 样式 属性 。“CSS 规则 定 
义 ” 对 话 框 中 可 以 设置 的 CSS 属性 比 第 3 章 中 介绍 的 要 多 ,但 不 是 常用 的 属性 一 般 也 不 需 
要 设置 。 

在 “CSS 规则 定义 ?对 话 框 中 ,CSS 样式 定义 分 为 以 下 8 种 类 别 。 

Q@ “类 型 "属性 设置 。CSS 样式 表 “ 类 型 "属性 主要 是 设置 CSS 的 字体 属性 。“ 类 型 " 属 
性 设置 对 话 框 如 图 4-17 所 示 , 主 要 完成 下 列 CSS 字体 属性 的 设置 : font-family (字体 )， 
font-size( 大 小 ) ,font-style( 样 式 ), line-height ( 行 高 ),font-weight (粗细 ), text-transform 
(大 小 写 ) ,color( 颜 色 ) ,text-decoration( 修 饰 ) 。 


可 
分 类 类 型 
字体 外 ); v 
1 不 gg 六 本 no 可 
四 | 样式 四 ): 了 变 体 中: 了 
行 高 中 ); 了 | 信 于 5 可 大 小 号 四 : 了 | 
修订 四 : 厂 下 X 肛 四 贡 ECE[ 
厂 上 3 二 四 ) 
厂 删除 线 员 
厂 闪烁 多 
厂 无 中 
EJ ww | nw | Ww 


4-17 “类 型 "属性 设置 对 话 框 


i @ ) 静态 网 站 制作 项 目 教程 


@ “背景 "属性 设置 。“ 背 景 "属性 设置 对 话 框 如 图 4-18 所 示 , 主 要 完成 下 列 CSS 背景 
属性 的 设置 : background-color (背景 颜色 ),background-image (背景 图 像 ), background- 
repeat( 重 复 ) ,background-position( 水 平 .垂直 位 置 ) 。 


到 
分 类 背景 
Bi eo 一 
§ Emo 六 可由 
: we 
| 


水 平 位 置 世 )- 下 | 肖 素 px) 二 
委 直 位 置 W) 相像 索 (yx) 二 


Cm] ww | snw | Ww | 


4-18 “背景 "属性 设置 对 话 框 


@“ 区 块 ”属性 设置 。“ 区 块 " 属 性 设置 对 话 框 如 图 4-19 所 示 , 在 对 话 框 中 主要 完成 下 
列 CSS 文本 相关 属性 的 设置 : word-spacing( 单 词 间距 ) ,letter-spacing( 字 母 间 距 ) ,vertical- 
align( 垂 直 对 齐 ) ,textralign( 文 本 对 齐 ) ,text-indent (文本 缩 进 ) 。 


单 可 apEG)「 | | 
四 SE 可 FF 可 
2 | 
ES 本 
Sm 本 
sv 


Ce] ww | ssw | ww | 


4-19 “区 块 ?属性 设置 对 话 框 


@@“ 方 框 "属性 设置 。“ 方 框 ” 属 性 对 话 框 主要 设置 一 个 区 域 的 width( 宽 ) .height( 高 )、 
margin( 边 距 ) ,float( 浮 动 ) 属 性 。 

加 “边框 "属性 设置 。“ 边 框 ” 属 性 设置 对 话 框 主要 设置 CSS 边框 的 border-style( 样 
式 ) 、border-width( 宽 度 ) .border-color( 颜 色 ) 属 性 。 只 不 过 在 这 里 可 以 分 别 设置 边框 的 上 
下 左右 属性 ,而 且 可 以 选择 更 多 的 边框 样式 。 

@ “列表 ”属性 设置 。 设 置 CSS 的 列表 项 属性 。 
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@ “定位 "属性 设置 。“ 定 位 "属性 设置 对 话 框 除了 设置 position( 定 位 类 型 ) top \left、 
z-index 定位 属性 之 外 ,还 包括 一 个 区 域 的 大 小 width( 宽 ) .height( 高 ) 设 置 。 定 位 类 型 选择 
“绝对 ?时 ,top \left 是 相对 于 浏览 器 窗口 左上 角 的 坐标 ,定位 的 对 象 会 呈现 出 * 层 ”的 特性 ， 
可 以 使 用 鼠标 移动 区 块 位 置 来 改变 top \left 属性 ; 定位 类 型 选择 “相对 ?时 ,top \left 是 相对 
于 该 区 块 对 象 当 前 应 该 占据 的 位 置 ,只 能 使 用 代码 调整 top ,left 属性 ,不 能 通过 鼠标 移动 
区 块 。 

@ “扩展 ”属性 设置 “扩展 ” 属 性 设置 对 话 框 中 主要 是 设置 鼠标 的 样式 和 CSS 的 滤 镜 
效果 。 

在 “CSS 规则 定义 ?对 话 框 中 将 CSS 样式 分 为 8 种 类 别 , 但 是 ,在 定义 CSS 样式 时 并 非 
一 个 样式 只 能 在 一 个 分 类 中 定义 。 一 个 样式 可 能 需要 几 个 分 类 中 的 属性 。 

2. CSS 样式 管理 

(1) 附加 样式 表 。 在 使 用 外 部 样式 表 文 件 时 ,需要 通过 链接 或 导入 的 方式 附加 外 部 样 
式 表 文件 。 操 作 方 法 可 以 是 : 在 文档 属性 面板 的 “样式 ”下 拉 列 表 框 中 选择 “附加 样式 表 ” 或 
在 "CSS 样式 ”面板 中 单 击 “ 附 加 样式 表 ” 图 标 都 可 以 打开 “链接 外 部 样式 表 ” 对 话 框 ,从 中 选 
择 样 式 表 文件 和 选择 “链接 "“ 导 入 ”方式 .就 可 以 将 外 部 样式 表 文件 附加 到 本 网 页 文档 。 

(2) 为 对 象 指定 样式 。 无 论 是 在 文档 中 定义 的 样式 还 是 附加 的 样式 表 文 件 中 的 样式 ， 
都 可 以 在 文档 属性 面板 的 “样式 "下拉 列表 框 中 选择 使 用 ; 在 “属性 ”面板 的 “类 ”下 拉 列 表 框 
中 也 可 以 选择 样式 ; 在 选中 对 象 之 后 , 右 击 打开 快捷 菜单 ,选择 “CSS 样式 ”命令 ,在 弹出 的 
菜单 中 也 可 以 选择 样式 。 

(3) 编辑 样式 。 在 “CSS 样式 ”面板 中 ( 见 图 4-15) ,从 “所 有 规则 ”列表 中 选择 一 个 样式 ， 
在 CSS 面板 的 “属性 ”窗口 便 可 以 对 样式 的 所 有 属性 进行 修改 。 在 文档 “代码 ”窗口 中 ,也 可 
以 直接 修改 CSS 样式 代码 。 


4.3 “Dreamweaver 简介 ”页 面 制作 


4.3.1 任务 分 析 


本 教学 任务 是 制作 “网 页 编辑 工具 ”栏目 中 的 “Dreamweaver 简介 ”网 页 prac4-1. html。 
根据 教学 项 目 网 站 中 该 页 面 的 设计 ,该 任务 中 主要 是 使 用 CSS 样式 实现 网 页 显示 效果 。 使 
用 的 素材 图 片 为 images\tp4-1-2. jpg、tp4-6. jpg。 


4.3.2 Dreamweaver 简介 页 面 制作 


1. 新 建站 点 

启动 Dreamweaver, 打 开 “ 站 点 ”菜单 ,选择 “新 建站 点 "命令 ,将 “本 地 站 点 文件 夹 ” 设 置 
到 前 面 章节 创建 的 本 地 站 点 根 目录 。 

2. 新 建文 档 

在 Dreamweaver 中 ,新 建 “HTML 文档 "(在 菜单 栏 中 选择 “新 建 ”| HTML 命令 , 单 击 
“创建 "按钮 新 建 一 个 网 页 文件 ) ,在 本 地 站 点 中 保存 为 prac4-1. html( 在 菜单 栏 中 使 用 “ 文 
件 ”| “另存 为 ”命令 ,选择 站 点 文件 夹 ,文件 名 使 用 prac4-1. html)。 注 意 : 不 要 使 用 
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Dreamweaver 自动 命名 的 文件 名 Untitled-x. html, 要 使 用 容易 辨认 的 网 页 文件 名 保存 网 页 文件 。 

3. 定义 边框 样式 

在 “CSS 样式 ”面板 中 单 击 “ 新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ”对 话 框 ,新 建 一 个 
“类 ”, 类 名 称 使 用 sl ,选择 “ 仅 限 该 文档 ”。 

在 “背景 "选项 卡 中 设置 “背景 图 像 ” 为 images\tp4-1-2. jpg。 

在 “ 方 框 ”选项 卡 中 设置 “宽度 ”为 900px,“ 高 度 ”为 120px。 

在 “边框 ”选项 卡 中 设置 “样式 ”为 inset, “宽度” 为 20px, “颜色” 为 #00{f99。 

4. 显示 边框 

在 页 面 中 输入 几 个 回 车 符 (标签 选择 器 中 出 现 二 p 记 ,代码 窗口 中 会 出 现 几 个 <p 二 
&nbsp; 达 /Pp 二 标记 ) ,在 文档 窗口 选择 第 1 行 , 右 击 , 在 快捷 菜单 中 选择 “CSS 样式 ”命令 ,在 
打开 的 样式 列表 中 选择 s1。 文 档 窗口 内 会 出 现 CSS 样式 效果 ,如 图 4-20 所 示 。 
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4-20 CSS 样式 效果 


5. 定义 标题 样式 

在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ?按钮 打开 * 新 建 CSS 规则 ?对 话 窗口 ,新 建 一 
个 “类 ”, 类 名 称 使 用 s2 ,选择 * 仅 限 该 文档 ”。 

在 “类 型 ?选项 卡 中 设置 “字体 ?为 “华文 新 魏 (或 其 他 字体 )”;“ 大 小 ?为 2cm;“ 粗 细 ” 选 
择 800;“ 颜 色 ” 为 #0000b3。 

在 “扩展 ”选项 卡 中 选择 shadow(color 二 #6666{f, direction 二 45)。 

在 “定位 ?选项 卡 中 设置 “类 型 ?为 absolute,“Z 轴 ” 为 2。 

6. 插入 网 页 标题 

在 边框 下 面 输入 文字 “网 页 编辑 工具 ”, 选 中 “网 页 编辑 工具 ”, 右 击 , 在 快捷 菜单 中 选择 
“CSS 样式 ”命令 ,在 打开 的 样式 列表 中 选择 s2。 用 鼠标 将 “网 页 编辑 工具 ”文字 区 块 拖 动 到 
边框 内 的 适当 位 置 。 

保存 文档 ,在 浏览 器 中 预览 网 页 就 会 看 到 文字 的 阴影 效果 (注意 ,如 果 不 使 用 “定位 " 属 
性 , 滤 镜 效果 可 能 不 起 作用 )。 

7. 插入 图 片 

选择 “插入 ”|“ 图 像 " 命 令 , 选 择 images\tp4-6. jpg。 选 中 插入 的 图 片 ,在 “属性 ”面板 中 
设置 图 片 的 属性 为 宽 200px, 高 100px,' 垂 直 边 距 20px, 水 平 边 距 20px, “对 齐 ” 选 择 “ 左 对 
齐 ”, 用 于 实现 图 文 混 排 。 

8. 插入 文字 

如 果 使 用 系统 默认 的 样式 ,可 以 直接 在 文档 窗口 中 输入 文字 。 也 可 以 在 输入 文字 后 , 选 
中 文字 ,从 * 属 性 ?面板 中 设置 文字 的 样式 。 注 意 每 段 文字 开始 的 空格 需要 使 用 Ctrl 十 Shift 十 
Space 键 输入 。 


第 4 章 使 用 Dreamweaver 制 作 网 页 (BL) 


在 文档 窗口 中 选中 文本 之 后 ,在 “属性 ”面板 中 可 以 设置 选中 文本 的 属性 。 文 本 属性 面 
板 如 图 4-21 所 示 , 其 中 图 4-21(a) 是 低 版 本 的 Dreamweaver 文本 属性 面板 ,图 4-21(b) 是 
Dreamweaver CS 版 本 中 文本 属性 面板 。 


打开 CSs 面 板 对齐 方式 浏览 文件 
指向 


区 硫 志 ”本 ” 禄 [无 EE | 
VF 可 ”大 于 可可 后 Elslglal B# 避 


文本 颜色 项 目 列表 | | 文本 凹 进 
编号 列表 文本 是 出 “快速 标签 编辑 器 
(a) 低 版 本 的 Dreamweaver 文 本 属性 
《> mL | 目标 规则 | < css 规则 > 司 | | 字体 四 | 默认 字体 v|BZ 主 短 误 证 
[Bcss]| css 面板 必 忆 直人 [1 汉 [» 加 | 压 | 
列表 项 目 


(b) Dreamweaver CS 版 本 的 文本 属性 
图 4-21 文本 属性 面板 


从 图 4-21 可 以 看 到 ,Dreamweaver CS 版 本 中 文本 属性 设置 的 项 目 减少 了 很 多 。 对 于 
设置 文本 的 超 链接 只 能 使 用 “插入 ”|“ 超 链接 ”命令 去 设置 。 
文字 输入 完成 之 后 保存 文档 ,在 浏览 器 中 浏览 效果 。 


4.4 “ 层 与 行为 ”页 面 制 作 


4.4.1 任务 分 析 


本 任务 是 制作 “网 页 编辑 工具 ”栏目 中 的 “ 层 与 行为 * 网 页 prac4-2. html。 根 据 教学 项 目 
网 站 中 该 页 面 的 设计 ,该 任务 中 主要 是 使 用 “ 层 ” 布 局 技术 和 “显示 -隐藏 层 "行为 完成 扩展 网 
页 容量 的 效果 。 

该 任务 中 使 用 的 图 片 素材 为 images\tp4-11. jpg、tp4-3. jpg、tp4-4. jpg、tp4-7. jpg、tp4- 
8. jpg、tp4-9. jpg、tp4-10. jpg; Flash 动画 素材 是 flashes/fl4-2. swf。 


4.4.2 层 (APDiv) 


Dreamweaver 中 使 用 * 层 ?表示 一 个 可 以 精确 定位 的 网 页 元 素 .“ 层 ”是 一 个 可 以 容纳 
文本 、 图 像 等 网 页 元 素 的 容器 ,是 一 个 可 以 单独 编辑 处 理 的 对 象 ,是 一 个 可 以 进行 三 维 精确 
定位 的 元 素 。“ 层 ”在 Dreamweaver CS 版 本 中 称 作 “AP Div” 元 素 。 

1. 插入 层 

在 菜单 栏 中 使 用 “插入 ”| “布局 对 象 *1“ 层 (或 AP Div)” 命 令 可 以 在 网 页 中 插入 一 个 
“ 层 ”; 或 者 在 “插入 ”、“ 布 局 ”工具 栏 中 选择 “绘制 层 ( 绘 制 AP Div)” 工 具 后 ,在 文档 窗口 可 
以 绘制 “ 层 ”。 
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“绘制 层 ” 可 以 在 窗口 的 任何 位 置 绘 制 ,也 可 以 重 释 。 每 个 层 有 一 个 唯一 的 Z- 轴 属性 
值 。 在 如 图 4-22 所 示 的 “ 层 (AP 元 素 )” 面 板 中 ,可 以 选择 层 \ 设 置 层 的 Z- 轴 属性 、 可 见 性 ; 
选中 “防止 重 释 " 复 选 框 后 , “绘制 层 " 时 就 不 能 重 从 绘制 。 


(a) 低 版 本 的 层面 板 (b) 高 版 本 的 AP 元 素面 板 


4-22 “ 层 (AP 元素 )” 面 板 


2. 设置 层 的 属性 
选中 一 个 层 后 ,可 以 通过 * 层 调整 手柄 ”调整 层 的 大 小 ,可 以 移动 层 的 位 置 , 可 以 设置 层 
的 属性 。 层 “属性 ”面板 如 图 4-23 所 示 。 


屋 编号 堪 四 | 249px 。 视 | 134px 区 背景 图 入 与 

jv Lm 高 FRR 可 Me RE 
Sa 本 goAE ”有 
让 hy 


4-23 层 * 属 性 ?面板 


在 层 “ 属 性 ”面板 中 ,“ 左 "“ 上 ”和 “Z 轴 ? 是 层 的 定位 属性 ,指定 层 的 左上 和 角 坐 标 位 置 和 
Z 轴 方 向 排列 顺序 。 修 改 “ 左 “上 ”属性 可 以 移动 层 的 位 置 ; 修改 “Z 轴 ” 属 性 可 以 改变 层 的 
前 后 重要 位 置 顺序 。 

“ 宽 ?”“ 高 ”属性 指定 层 的 大 小 。 修 改 “ 宽 “高 ”属性 可 以 改变 层 的 大 小 。 

“背景 图 像 *“ 背 景 颜 色 ” 用 于 设置 该 层 的 背景 图 像 或 背景 颜色 。 

“可 见 性 ”属性 一 般 选择 Default 和 Hidden。Hidden 为 隐藏 的 。 该 属性 也 可 以 在 “ 层 ” 
面板 中 单 击 层 名 称 中 的 “可 见 性 ” 列 来 设置 。 

“溢出 ”属性 设置 层 内 的 内 容 超出 了 层 的 大 小 时 的 处 理 方式 ,其 中 选项 列举 如 下 。 

Visible: 自动 向 右 下 方 扩展 以 显示 所 有 内 容 。 

Hidden: 不 显示 溢出 部 分 内 容 。 

Scroll: 为 层 加 上 滚动 条 用 于 溢出 浏览 。 

Anuto: 在 产生 溢出 时 ,自动 添加 滚动 条 用 于 溢出 浏览 。 

“剪辑 ”属性 用 于 设置 显示 在 层 内 的 部 分 内 容 , 其 中 * 左 “上 ”和 * 右 “下 ”指定 显示 区 
域 相 对 于 层 的 左上 和 角 坐 标 和 右 下 角 坐 标 。 例 如 ,图 4-24 中 是 剪辑 区 域 相对 于 层 的 左上 和 角 坐 
标 为 (50,50) , 右 下 角 坐 标 为 (300,200) 的 显示 效果 。 

3. 对 齐 层 

需要 将 多 个 层 的 位 置 对 齐 时 ,可 以 按 住 Shift 键 , 单 击 多 个 层 完成 多 个 层 的 选择 。 在 
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上 {300, 200) 


[body yldiv#Laver4” [INI fox vvE 52 


屋 编 去 加 | loszx 寓 | 356x 2 珊 背景 回潮 | 
| 上 四 站 earx 高 | 251px 。 可见 性 [totwlt， 可。 青 景 疗 色 厂 -| 


放出 [aut。 开 | 到 加 : 左 | 50 右 | 300 


| soF 200 


4-24 ”剪辑 区 域 


“属性 ?面板 中 设置 层 的 “ 左 *“ 上 ?”…“ 宽 >“ 高 ”属性 使 多 个 层 对 齐 ; 或 者 在 菜单 中 使 用 “ 修 
改 ”1“ 排 列 顺序 ”命令 ,选择 “ 左 对 齐 ”“ 右 对 齐 ”“ 对 齐 上 缘 *“ 对 齐 下 缘 ” 可 以 完成 对 某 个 边 
缘 的 对 齐 ; 选择 “ 设 成 宽度 相同 ”和 “ 设 成 高 度 相 同 ” 可 以 使 其 大 小 相同 。 

多 个 层 完 全 重 和 至 后 ,选择 下 面 的 层 时 只 能 在 * 层 ?面板 中 选择 层 名 称 。 

4. 层 内 容 编辑 

“ 层 " 在 页 面 中 是 一 个 完全 独立 的 元 素 ,通过 层 属性 面板 可 以 设置 每 个 层 的 背景 颜色 与 
背景 图 片 。 单 击 某 个 层 后 ,就 可 以 在 层 内 插 和 文本、 图像. 表格、 水 平 线 、 超 链接 等 网 页 元 素 ， 
层 内 容 的 编辑 方式 和 普通 网 页 文档 编辑 完全 相同 。 


4.4.3 行为 


1. 行为 的 概念 

Dreamweaver 中 的 “行为 "是 面向 “事件 驱动 "的 JavaScript 脚本 程序 。 当 页 面 上 发 生 某 
一 “事件 ”时 ,根据 事先 的 定义 去 执行 该 事件 的 过 程 代码 ,在 页 面 上 产生 某 种 效果 的 “动作 ”。 
所 谓 “ 行 为 ”就 是 根据 发 生 的 “事件 ”而 采取 的 “动作 ”。 

2. 事件 

事件 是 网 页 中 发 生 的 某 种 动作 。 常 用 的 事件 列举 如 下 。 

onLoad: 页 面 或 图 像 文件 被 打开 时 发 生 的 事件 。 

onUnload: 页 面 或 图 像 文件 关闭 时 发 生 的 事件 。 

onMouseOver: 当 鼠 标 移动 到 对 象 上 面 时 发 生 的 事件 。 

onMouseOut: 当 鼠 标 从 对 象 上 移 开 时 发 生 的 事件 。 

onClick: 当 鼠 标 单 击 对 象 时 发 生 的 事件 。 

onDblClick: 当 鼠 标 双 击 对 象 时 发 生 的 事件 。 

onMouseDown: 当 鼠 标 按 下 时 发 生 的 事件 。 

onMouseUp: 当 鼠 标 放 开 时 发 生 的 事件 。 
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onKeyDown: 当 键 盘 上 有 键 按 下 时 发 生 的 事件 。 

onKeyUp: 当 键 盘 按键 放 开 时 发 生 的 事件 。 

onKeyPress: 当 键 盘 有 按键 时 发 生 的 事件 。 

3. 添加 行为 

为 选中 的 对 象 添加 行为 需要 在 “窗口 "菜单 中 选择 “行为 ”命令 ,打开 “行为 ”面板 。“ 行 
为 ”面板 如 图 4-25 所 示 。 

“行为 ”面板 的 说 明 如 下 。 

(1) 行为 对 象 : 该 行为 附加 到 的 对 象 。 图 4-25 中 的 二 body 二 表示 该 行为 对 象 是 页 面 。 

(2) 添加 行为 按钮 : 是 一 个 下 拉 菜 单 ,从 中 可 以 选择 添加 的 行为 。 

(3) 删除 行为 按钮 : 用 于 删除 选中 的 行为 。 

(4) 显示 所 有 事件 : 在 事件 列表 位 置 显示 所 有 的 事件 。 

(5) 显示 设置 事件 : 在 事件 列表 位 置 显示 已 经 设置 的 事件 及 动作 。“ 显 示 所 有 事件 ”和 
“显示 设置 事件 ”为 互 锁 按 钮 。 

(6) 行为 顺序 调整 . 用 于 调整 行为 的 先后 顺序 。 一 个 对 象 可 以 附加 多 个 行为 ,行为 顺 
序 按 行为 列表 中 的 排列 顺序 发 生 。 

4. 行为 对 象 

在 低 版 本 的 Dreamweaver 中 ,行为 对 象 一 般 是 页 面 ( 二 body 二 ) `. 超 链接 (一 a 之 ) .图像 
(<img 之 ) 和 层 (<div 之 ) 。 如 果 需 要 为 文本 添加 行为 ,就 需要 将 文本 制作 成 一 个 * 空 链接 ”， 
即将 超 链接 的 目标 地 址 属性 设置 为 “#”。 在 Dreamweaver CS 版 本 中 ,行为 对 象 可 以 是 任 
何 网 页 元 素 。 

S. 行为 菜单 

选中 行为 对 象 之 后 , 单 击 “ 添 加 行为 ”按钮 ,可 以 打开 行为 菜单 。 图 4-26(a) 是 低 版 本 的 
Dreamweaver 行为 菜单 ; 图 4-26(b) 是 Dreamweaver CS 版 本 中 行为 菜单 。 


显示 设置 事件 显示 弹出 式 菜单 二 
显示 所 有 事件 检查 括 件 st 


添加 行为 获取 更 多 行为 
事件 列表 (a) 


图 4-25 “行为 ”面板 图 4-26 行为 菜单 
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根据 选择 的 行为 对 象 不 同 ,行为 菜单 中 的 菜单 项 的 状态 有 所 不 同 。 行 为 对 象 不 能 添加 
的 行为 在 行为 菜单 中 显示 为 灰色 状态 ,表示 该 行为 不 能 用 于 该 对 象 。 

单 击 可 选 的 行为 ,可 以 为 行为 对 象 添加 该 行为 。 有 的 行为 菜单 还 有 下 级 菜单 。 

6. 添加 行为 过 程 

在 Dreamweaver 中 ,添加 行为 的 一 般 过 程 如 下 : 

(1) 选择 行为 对 象 。 

(2) 单 击 “ 添 加 行为 ”按钮 ,打开 行为 菜单 ,选择 添加 的 行为 ,打开 该 行为 的 参数 设置 对 
话 窗口 。 

(3) 设置 行为 参数 。 单 击 “ 确 定 ” 按 钮 提交 行为 参数 。 

(4) 在 “事件 列表 ”中 检查 “事件 "是否 正确 ,不 正确 时 通过 “事件 列表 ”中 的 下 拉 列 表 重 
新 选择 事件 。 

7. 编辑 行为 动作 

如 果 需 要 修改 行为 的 动作 设置 ,双击 行为 的 动作 部 分 ,可 以 打开 动作 设置 对 话 框 重 新 
设置 。 
4.4.4 ”显示 -隐藏 层 " 行为 

“显示 -隐藏 层 " 行 为 在 Dreamweaver CS 版 本 中 称 作 ”显示 -隐藏 元 素 ”。 

在 低 版 本 的 Dreamweaver 中 “显示 -隐藏 层 ” 的 行为 对 象 只 能 是 超 链 接 标记 和 图 像 ; 在 
Dreamweaver CS 版 本 中 “显示 -隐藏 元 素 ” 的 行为 对 象 可 以 是 文本 。 

“显示 -隐藏 层 ” 行 为 是 利用 鼠标 移 到 对 象 之 上 或 从 对 象 上 移 开 的 事件 来 触发 对 层 “ 可 见 
性 ?属性 的 修改 ,从 而 形成 层 内 容 的 动态 显示 效果 。 设 置 “显示 -隐藏 层 " 行 为 对 话 框 如 图 4-27 
所 示 。 在 设置 “显示 -隐藏 层 " 行 为 对 话 框 中 可 以 设置 当 行为 对 象 的 特定 事件 发 生 时 哪个 层 
显示 ,哪些 层 隐藏 。 为 了 简单 起 见 ,一 般 在 初始 时 只 显示 最 底层 的 层 , 其 余 的 层 都 隐藏 起 来 。 
当 行 为 对 象 的 特定 事件 发 生 时 ,显示 某 个 特定 的 层 。 当 然 ,在 特定 事件 发 生 过 后 ,还 应 该 将 


图 4-27 “显示 -隐藏 层 "对 话 框 


4.4.5 ”小 与 行为 "页 面 制作 


1. 新 建文 档 
在 Dreamweaver 中 打开 本 地 站 点 ,新 建 “”HTML 文档 ”, 在 本 地 站 点 中 “另存 为 ”prac4- 
2. html。 
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2. 页 面 布局 

(1) 插入 3 行 1 列表 格 ,宽度 为 960px, 边 框 粗细 、 单 元 格 边 距 、 间 距 全 部 设 为 0。 

(2) 插入 Flash 动画 。 在 表格 第 1 行 插入 Flash 动画 。 在 Dreamweaver 中 使 用 “插入 ”| 
“媒体 ”|Flash( 或 SWF) 命 令 , 插 入 flashes\f14-2. swf。 

使 用 HTML 标记 在 网 页 中 插入 Flash 动画 比较 困难 ,即便 使 用 Dreamweaver 插入 
Flash 动画 后 ,在 网 页 上 只 是 显示 占 位 符 。 如 果 在 设计 窗口 中 想 查看 Flash 动画 效果 ,可 以 
选中 Flash 动画 后 在 属性 面板 中 单 击 “ 播 放 ” 按 钮 。 

(3) 在 第 3 行 单元 格 内 插入 2 行 2 列表 格 ,边框 粗细 为 0, 单 元 格 边 距 、 间 距 设 为 10px。 

(4) 选中 新 插入 表格 的 第 1 行 第 1 列 单元 格 , 设 置 其 "宽度 ?为 390px, 居 中 对 齐 。 输 入 
文字 * 胡 姬 花 ”, 设 置 文本 属性 ,字体 ?为 华文 彩云 (或 其 他 字体 )，“ 大 小 ?为 2cm, 颜 色 选择 
#006666。 

(5) 选中 新 插入 表格 的 第 2 行 第 1 列 单元 格 , 输 入 以 下 文字 : 

在 新 加 坡 国家 植物 园 内 ,有 3 千 多 种 胡 姬 花 。 胡 姬 花 是 东南 亚 一 带 人 们 对 兰花 的 称呼 ， 
例如 我 们 常见 的 蝴蝶 兰 。 

新 加 坡 国 家 植物 园 内 的 胡 姬 花 品 种 在 世界 上 是 最 多 的 ,而 且 很 多 新 品种 都 是 他 们 自己 
培育 的 ,很 多 胡 姬 花 的 名 字 是 用 名 人 的 名 字 命 名 的 ,所 以 一 般 人 叫 不 出 这 些 胡 姬 花 的 名 字 。 

下 面 使 用 编号 来 表示 胡 姬 花 的 种 类 ,使 用 鼠标 移动 到 某 个 编号 上 ,你 就 可 以 欣赏 到 该 纺 


号 的 胡 姬 花 。 
胡 姬 花 1] 号 胡 姬 花 2 号 
胡 姬 花 3 号 胡 姬 花 4 号 
胡 姬 花 5 号 胡 姬 花 6 号 


3. 制作 显示 -隐藏 层 

(1) 插入 层 。 插 入 或 绘制 一 个 层 (AP Div) ,选中 该 层 ,将 其 Z 轴 属 性 设 为 1; 使 用 * 插 
入 "| 图 像 "命令 ,在 层 内 插入 图 片 images/tp4-11. jpg, 替 换文 本 设置 为 “新 加 坡 国家 植物 
园 ”。 调 整 层 的 大 小 ,使 其 与 图 片 大 小 一 致 。 

再 插入 或 绘制 一 个 层 (AP Div) ,大 小 与 第 1 个 层 一 致 ,选中 该 层 , 将 其 Z 轴 属性 设 为 2; 
使 用 “插入 ”| 图像” 命令 在 层 内 搬入 图 片 images/tp4-3. jpg( 胡 姬 花 1 号 ) ,将 该 层 的 “可 见 
性 ?设置 为 隐藏 (Hidden)。 依 次 炮制 ,再 插入 另外 的 5 个 层 ,Z 轴 属 性 依次 设置 为 3,4,5,6， 
7; 分 别 在 层 内 插入 图 片 images/tp4-4. jpg( 胡 姬 花 2 号 ) images/tp4-7.jpg( 胡 姬 花 3 号 )、 
images/tp4-8.jpg( 胡 姬 花 4 号 ) ,images/tp4-9. jpg( 胡 姬 花 5 号 ) ,images/tp4-10. jpg( 胡 姬 
花 6 号 ); 将 这 5 个 层 的 "可 见 性 ?都 设置 为 隐藏 (Hidden) 。 

(2) 对 齐 层 。 在 层面 板 (AP 元 素面 板 ) 中 使 用 鼠标 加 Shift 键 将 7 个 层 全 部 选中 ,在 属 
性 面板 中 设置 “左上 、 宽 、 高 属性 ,使 其 大 小 .位 置 全 部 一 致 

(3) 制作 “显示 -隐藏 层 ” 行 为 。 在 低 版 本 的 Dreamweaver 中 ,显示 -隐藏 层 ” 的 行为 对 
象 不 能 是 文本 ,所 以 ,首先 选中 * 胡 姬 花 1 号 ?文字 ,在 属性 面板 中 设置 “ 超 链 接 ” 为 “#”, 表 示 
该 超 链接 是 连接 到 本 页 面 的 开始 ,实际 上 是 一 个 空 链接 。 

选中 * 胡 姬 花 1 号 ” 超 链接 文本 ,打开 “行为 ”面板 ,添加 “显示 -隐藏 层 ”行为 ,打开 如 图 4-27 
所 示 的 “显示 -隐藏 层 "行为 对 话 框 。 在 “命名 的 层 " 中 选择 插入 * 胡 媚 花 1 号 ”图片 的 层 ,选择 
“显示 ”, 单 击 “ 确 定 ” 按 钮 完成 设置 .在 “行为 ”面板 中 调整 行为 事件 为 onMouseOver。 再 为 “ 胡 
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姬 花 1 号 ? 超 链接 添加 一 个 “显示 -隐藏 层 "行为 ,在 “命名 的 层 " 中 选择 插入 “* 胡 姬 花 1 号 ?图 片 的 
层 , 选 择 “ 隐 藏 ”, 单 击 * 确 定 ? 按 钮 完成 设置 ,在 “行为 "面板 中 调整 行为 事件 为 onMouseOut 。 

(4) 完成 其 他 层 的 “显示 -隐藏 层 " 行 为 。 为 “ 胡 姬 花 2 号 一 6 号 ”完成 “显示 -隐藏 层 ” 行 
为 制作 。 

在 Dreamweaver CS 版 本 中 ,虽然 可 以 为 文本 直接 设置 “显示 -隐藏 元 素 ” 行 为 ,但 是 文 
本 实际 上 是 针对 所 p 之 标记 。 对 某 些 文本 添加 的 “显示 -隐藏 元 素 ” 行 为 , 当 该 行 的 任意 位 置 
发 生 指 定 的 事件 时 ,都 会 产生 动作 ,所 以 还 是 将 “显示 -隐藏 元 素 ” 行 为 对 象 设置 为 空 链接 比 

在 Dreamweaver CS 版 本 中 超 链接 只 能 使 用 “插入 ”|“ 超 级 链接 ”命令 完成 ,不 能 像 低 版 
本 那样 在 文档 属性 面板 中 设置 。 

4. 制作 显示 状态 栏 文本 行为 

设置 状态 栏 文本 行为 对 象 可 以 是 超 链 接 标 记 、 图 像 或 页 面 。 当 发 生 onLoad、onUnload、 
onMouseOver .onMouseOnut 事件 时 ,在 状态 栏 中 显示 特定 的 提示 消息 。 

在 “标签 选择 器 ”中 选中 忆 body> 标 记 , 打 开 * 行 为 ?面板 ,添加 行为 ,设置 文本 ”|* 设 置 
状态 栏 文本 ”, 打 开 * 设 置 状 态 栏 文本 对话 框 ,在 “消息 "文本 框 中 输入 “将 鼠标 指向 “ 胡 姬 
花 X 号 ,可 以 看 到 不 同 的 胡 姬 花 ”。 

5. 保存 文档 

保存 文档 ,预览 页 面 效 果 。 


4.5 “热点 图 像 ” 页 面 制作 


4.5.1 任务 分 析 


本 任务 是 制作 “网 页 编辑 工具 ”栏目 中 的 “热点 图 像 * 网 页 prac4-3. html。 该 任务 中 主要 
使 用 “热点 图 像 ”技术 完成 图 片 局 部 放大 效果 。 

根据 教学 项 目 网 站 中 该 页 面 的 设计 效果 ,制作 该 页 面 除 了 使 用 "热点 图 像 "技术 之 外 ,还 
包括 * 显 示 - 隐 茂 层 ?或 “设置 层 文本 "行为 以 及 CSS 样式 等 。 

该 任务 中 使 用 的 图 片 素材 为 images\ tp4-12. jpg tp4-3. jpg tp4-4. jpg tp4-7. jpg、 
tp4-9. jpg\tp4-10. jpg\tp4-13. jpg\tp4-14. jpg\tp4-15. jpg、\tp4-16. jpg。 


4.5.2 图 像 属性 与 热点 图 像 


1. 图 像 属性 面板 

在 Dreamweaver 中 选中 一 个 图 像 后 ,“ 属 性 ”面板 中 为 图 像 的 属性 。 图 像 属性 面板 如 
图 4-28 所 示 。 

“ 宽 ”" “高 ”"“ 源 文件 ” “替换 ”“ 边 框 ”" “对 齐 ”“ 垂 直 边 距 ”、“ 水 平 边 距 ”用 于 设置 
二 img 记 标记 的 width、height、src、alt、border、align、vspace、hspace 属性 。 在 “类 ”列表 框 中 
可 以 为 图 像 选 择 CSS 样式 。“ 区 段 对 齐 ” 是 设置 <p 二 、 二 div 记 标记 的 align 属性 ,使 用 此 属 
性 可 以 设置 图 像 的 水 平 居 中 放置 ,在 Dreamweaver CS 版 本 中 去 掉 了 “区 段 对 齐 ” 设 置 。 
“ 宽 ”“ 高 "属性 也 可 以 通过 拖 动 图 像 上 的 控制 点 调整 。 
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图 像 名 称 


有 19K 宽 F00 源 文件 lwyinages/ftz4_ jpg 人 局 。 车 执 [ | 类 @|[ 无 可 
| 


高 B00 链接 全 局“ 儿 四 吕 过 芭 O 
地 图 | 委 直 过 中 目标 习 EE 


RR DQY x 低 解析 度 源 加) [和 ET 贞 


矩形 、 二 加 形 、 多 边 形 热点 工具 区 段 对 齐 
4-28 图像 属 性 面板 


使 用 图 像 属性 面板 中 的 “链接 "文本 框 ,可 以 为 图 像 建立 超 链接 ,在 “目标 ”文本 框 中 可 以 
选择 超 链接 的 target 属性 值 。 

2. 热点 图 像 

热点 图 像 是 在 一 个 图 像 上 划 定 一 个 区 域 ,这 个 区 域 可 以 单独 创建 超 链接 或 添加 行为 。 
使 用 HTML 标记 也 可 以 制作 热点 图 像 ,但 是 区 域 的 指定 比较 麻烦 。 在 Dreamweaver 中 使 
用 图 像 热点 工具 可 以 方便 地 制作 各 种 形状 的 热点 图 像 。 


4.5.3 ”和 妆 点 图 像 "页 面 制作 


1. 新 建文 档 

在 Dreamweaver 中 打开 本 地 站 点 ,新 建 HTML 文档 ,在 本 地 站 点 内 另存 为 prac4-3. 
html。 

2. 页 面 标 题 制作 

(1) 在 文档 窗口 输入 文字 “ 赏 花 ”。 

(2) 在 CSS 面板 中 新 建 CSS 规则 ,类 名 称 使 用 s1, 选 择 “ 仅 限 该 文档 ”。 

@“ 类 型 ?设置 ， 

字体 : 隶书 ; 大 小 : 25mm; 颜色 : #1{f6600 

@ “扩展 ” 设 置 ， 

filter: shadow(color= #996600, direction=45); 

@“ 定 位 "设置 : 

类 型 : absolute 

(3) 给 文本 指定 样式 。 

QO@ 选中 “ 赏 花 "文本 , 右 击 ,在 快捷 菜单 选择 “CSS 样式 ”命令 ,在 “CSS 样式 ?列表 中 选 
择 sl 。 

@ 使 用 鼠标 移动 文字 到 合适 的 位 置 。 

3. 插入 水 平 线 

在 Dreamweaver 中 插入 水 平 线 的 操作 方法 如 下 : 

(1) 确定 插入 位 置 (光标 位 置 ) 。 

(2) 使 用 “插入 ”| HTMLI“ 水 平 线 ” 命 令 。 

(3) 修改 水 平 线 属性 。 当 选中 水 平 线 后 ,属性 面板 为 水 平 线 属性 。 水 平 线 属性 面板 如 
图 4-29 所 示 。 

在 水 平 线 属性 面板 中 ,“ 宽 ”是 水 平 线 显示 的 水 平 宽度 ,可 以 使 用 像素 指定 宽度 ,也 可 以 


第 4 章 使 用 Dreamweaver 制 作 网 页 ( @ OL) 


器 水 平 线 | 者 案 本 ET Y 类 四 无 ~ @ 
[ jw [G7 [= 


快速 标签 编辑 器 
4-29 水 平 线 属性 面板 


使 用 *%” 指 定 宽度 , 即 窗口 宽度 的 百分数 。 水 平 线 显示 默认 对 齐 方 式 为 水 平 居中 对 齐 。 

在 水 平 线 属性 面板 中 的 属性 设置 比较 少 ,如 果 需 要 更 多 的 属性 设置 ,可 以 在 代码 窗口 中 
直接 修改 二 hr 二 标记 的 属性 ; 或 者 为 水 平 线 指定 一 个 样式 。 修 改 二 hr 二 标记 的 属性 可 以 在 
水 平 线 属性 面板 中 单 击 “ 快 速 标签 编 辑 器 ”, 打 开 二 hr 二 标记 ,添加 其 他 属性 。 

直接 修改 二 hr 二 标记 的 其 他 属性 后 ,在 文档 窗口 内 不 能 马上 看 到 效果 ,需要 在 浏览 页 面 
时 才能 看 到 ,这 也 就 是 所 谓 的 不 支持 这 样 的 功能 。 

4. 网 页 布局 

网 页 布局 可 以 使 用 表格 实现 。 这 里 介绍 使 用 层 布局 技术 实现 的 做 法 。 

(1) 按照 网 页 设计 布局 插入 (绘制 )3 个 层 (AP Div) ,分 别 将 3 个 层 命 名 为 Ll1、L2、L3。 
调整 层 的 位 置 及 大 小 ,如 图 4-30 所 示 。 


L1: 400x60px 


L3:533x400px 


L2: 400x300px 


4-30 调整 层 的 位 置 及 大 小 


(2) 在 层 L2 中 书写 文字 * 当 你 的 鼠标 指向 下 面 图 中 的 某 个 花 上 面 时 ,右面 会 显示 该 花 
放大 的 图 片 ”。 在 属性 面板 中 设置 文字 的 大 小 和 颜色 (20px, #339966)。 

(3) 在 层 L2 中 插入 images\tp4-12. jpg 图 片 。 

(4) 在 层 L3 中 插入 images\tp4-7. jpg 图 片 。 

5. 制作 热点 图 像 

(1) 选中 层 L2 中 的 图 片 。 

(2) 在 图 像 属 性 面板 中 选择 矩形 热点 图 像 工 具 , 在 层 L2 中 的 图 片上 按照 不 同 的 花 绘制 
出 9 个 矩形 图 像 热点 。 

6. 制作 热点 图 像 效果 

热点 图 像 可 以 通过 设置 图 像 热点 的 超 链接 链接 到 不 同 的 页 面 、 图 像 等 。 按 照 设计 效果 ， 
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当 鼠 标 移动 到 某 个 花 上 面 时 ,右面 会 显示 该 花 放大 的 图 片 ,这 种 效果 可 以 通过 为 图 像 热 点 设 
置 行为 完成 。 

完成 该 设计 效果 可 以 使 用 “显示 -隐藏 层 ” 行 为 完成 ,也 可 以 使 用 “设置 层 文本 ”行为 完 
成 。 “设置 层 文本 ”行为 在 Dreamweaver CS 版 本 中 称 作 设 置 容器 文本 , 即 不 仅 可 以 设置 AP 
Div 元 素 的 文本 ,也 可 以 设置 其 他 Div、P 元 素 的 文本 。 

使 用 “设置 层 文本 ”行为 完成 页 面 效 果 的 操作 如 下 : 

选中 第 1 个 图 像 热 点 ,在 “行为 ”面板 中 添加 “设置 文本 ”|“ 设 置 层 文本 ”( 或 “设置 容器 文 
本 ”) 行 为 ,打开 “设置 层 文本 ”对 话 框 ,如 图 4-31 所 示 。 


4-31 “设置 层 文本 ”对 话 框 


设置 的 层 文本 内 容 就 是 在 “新 建 HTML” 文 本 框 内 输入 的 文本 内 容 或 HTML 标记 。 
在 “新 建 HTML” 文 本 框 内 输入 HTML 标记 : 


<img src= "images/tp4-9.jpg"> 


images/tp4-9. jpg 是 第 1 个 图 像 热 点 对 应 的 图 片 , 后 面 8 个 图 像 热点 对 应 的 图 片 为 
images/tp4-10. jpg \images/tp4-13. jpg images/tp4-3. jpg images/tp4-7. jpg ,images/ tp4-4. jpg、 
images/tp4-14. jpg images/tp4-15.jpg images/tp4-16.jpg。 

注意 HTML 标记 中 的 “/” 符 号 不 能 使 用 “\”。 

使 用 * 设 置 层 文本 ”行为 和 * 显 示 - 隐 藏 层 ”行为 达到 的 效果 相同 ,但 “设置 层 文本 ”行为 只 
需要 使 用 一 个 层 容器 ,需要 正确 书写 HTML 标记 。 

7. 保存 文档 

保存 文档 ,预览 页 面 效果 。 


4.6 栏目 首页 页 面 制作 


4.6.1 任务 分 析 


本 教学 任务 是 制作 “网 页 编辑 工具 ”栏目 中 的 栏目 首页 prac4. html。 该 任务 包括 栏目 标 
题 . 导 航 栏 . 系 统 日 期 显示 , 带 透 明 效 果 的 交换 图 像 制 作 ,Flash 动画 .GIF 动画 插入 ,版 权 信 
息 .电子 邮件 连接 以 及 网 页 表格 布局 等 。 

完成 该 任务 需要 使 用 表格 布局 .CSS 样式 .Dreamweaver 行为 等 技术 。 

该 任务 中 使 用 的 素材 为 图 片 images\tp4-1. jpg、tp4-2. jpg、tp4-2-1. jpg、tp4-3. jpg、tp4- 
4.jpg; GIF 动画 images/tp4-5. gif; Flash 动画 flashes/fl4-1. swf。 
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4.6.2 栏目 首页 页 面 制 作 


1. 新 建文 档 

在 Dreamweaver 中 新 建 HTML 文档 ,在 本 地 站 点 中 保存 为 prac4. html。 

2. 插入 页 面 布局 表格 

在 文档 窗口 内 ,插入 5 行 1 列 表格 ,表格 宽度 为 960px, 边 框 粗细 ,单元 格 间距 、 单 元 格 
边 距 都 设置 为 0。 插入 表格 后 ,在 文档 窗口 右 击 表格 区 域 ,在 快捷 菜单 中 选择 “表格 ”|* 选 择 
表格 ”命令 ,在 “表格 ”属性 面板 中 设置 “对 齐 ” 属 性 为 “居中 对 齐 ”。 

表格 “对 齐 ? 属 性 设置 为 “居中 对 齐 ” 之 后 ,在 高 分 辩 率 的 显示 器 上 浏览 时 ,例如 在 1280X 
800 或 1440X900 的 显示 器 上 浏览 时 ,页面 内 容 都 会 居中 显示 , 比 靠 窗口 左 侧 显示 美观 。 

3. 页 面 标题 制作 

在 低 版 本 的 Dreamweaver 中 ,可 以 如 下 制作 页 面 标题 。 

(1) 选中 表格 的 第 1 个 单元 格 , 在 “单元 格 ? 属 性 面板 中 设置 "高 ”为 160px;“ 水 平 "“ 垂 
直 ? 对 齐 方式 都 选择 * 居 中 ”;“ 背 景 "浏览 选择 images\tp4-1. jpg。 

(2) 在 第 1 个 单元 格 内 输入 文字 * 网 页 编辑 工具 ”( 文 字 显 示 位 置 不 合适 时 可 以 插入 空 
格调 整 ) 。 

(3) 选中 文字 “网 页 编辑 工具 ”, 在 属性 面板 中 设置 “字体 ”为 方正 舒 体 (或 其 他 字体 )， 
“大 小 ”为 2em;“ 粗 细 ? 选 择 800;“ 颜 色 ” 为 白色 。 

在 Dreamweaver CS 版 本 中 ,单元 格 属性 面板 中 不 能 设置 单元 格 背 景 图 片 , 所 以 制作 方 
法 可 以 直接 在 “代码 ”窗口 内 修改 二 td 二 标记 属性 : 


<td height="160" align= "center" valign="middle" background= "images/tp4-1.jpg" > 


也 可 以 按 以 下 方法 制作 。 

(1) 选中 表格 的 第 1 个 单元 格 ,在 “单元 格 ? 属 性 面板 中 设置 “高 为 160px;“ 水 平 "“ 垂 
直 ” 对 齐 方式 都 选择 “居中 ”。 

(2) 在 第 1 个 单元 格 内 输入 文字 “网 页 编辑 工具 ”。 

(3) 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ”对 话 框 ,新 建 
一 个 “类 ”, 类 名 称 使 用 sl ,选择 “ 仅 限 该 文档 ”。 

在 “背景 "选项 卡 中 设置 “背景 图 像 ”为 images\tp4-1. jpg; 

在 “类 型 ?选项 卡 中 设置 “字体 ?为 方正 舒 体 (或 其 他 字体 );“ 大 小 ?为 2cm;“ 粗 细 ” 选 择 
800;“ 颜 色 ” 为 #990000。 

(4) 选中 文字 “网 页 编辑 工具 ”, 为 其 指定 CSS 样式 sl 。 

4. 导航 栏 制作 

(1) 选中 第 2 个 单元 格 , 设 置 单元 格 “高 ”为 50px; 设置 背景 图 片 为 images/tp4-2-1.jpg 
(Dreamweaver CS 版 本 中 单元 格 背景 图 片 设置 方法 参考 “3. 页 面 标题 制作 ”) 。 

(2) 在 单元 格 内 输入 超 链接 文本 ,注意 各 个 超 链接 文本 之 间 使 用 空格 间隔 开 。 

(3) 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ?按钮 打开 * 新 建 CSS 规则 ”对 话 框 ,新 建 
一 个 “类 ”, 类 名 称 使 用 s2 ,选择 “ 仅 限 该 文档 ”。 

在 “类 型 "选项 卡 中 设置 “大 小 ”为 14px;“ 粗 细 ? 选 择 600;“ 颜 色 ” 为 #33cc99。 


(YX L104 静态 网 站 制作 项 目 教程 


在 “定位 ”选项 卡 中 设置 “类 型 "为 “相对 ”,“ 左 ”为 100px,“ 上 ”为 14px。 

在 “ 方 框 ”选项 卡 中 设置 “ 宽 ” 为 500px.“ 高 ”为 16px。 

(4) 选中 导航 栏 超 链接 文字 ,为 其 指定 CSS 样式 s2。 

样式 s2 定位 属性 采用 “相对 ”定位 是 由 于 布局 表格 使 用 了 “居中 对 齐 ”, 如 果 使 用 “绝对 ” 
定位 方式 , 当 网 页 在 较 高 分 辩 率 的 显示 器 中 浏览 时 , 超 链 接 文本 显示 的 位 置 就 会 偏离 设计 的 
位 置 ,因为 “绝对 ”定位 是 相对 于 屏幕 窗口 的 。 

采用 相对 定位 时 ,由 于 导航 栏 超 链 接 文 本 放置 在 了 单元 格 内 ,定位 是 相对 于 该 单元 格 
的 ,无 论 表 格 的 位 置 移动 了 多 少 , 其 相对 位 置 是 不 变 的 。 

5. 设置 导航 栏 超 链接 

(1) 设置 超 链接 样式 。 在 图 4-1 中 可 以 看 到 ,导航 栏 中 的 超 链接 文本 下 面 没有 一 般 超 
链接 的 下 划 线 ,而 且 单 击 后 也 不 像 其 他 超 链接 一 样 超 链接 文本 改变 颜色 ,这 是 由 “页 面 属性 ” 
中 的 “链接 ”样式 设置 的 。“ 链 接 ” 样 式 设置 对 话 框 如 图 4-32 所 示 。 


页 面 属性 


变 扫 图 沸 链 接 虫 ): 本 | [#009993 
活动 居 接 W) ;加 | [#009955 


[=m | WR | WT] 


4-32 “链接 ”样式 设置 对 话 框 


将 “下 划 线 样式 ”设置 成 “始终 无 下 划 线 ” ,颜色 全 部 设置 成 #009999, 就 可 以 实现 页 面 设 
计 要 求 。 

(2) 页 面 超 链接 设计 要 求 。 栏 目 首页 中 的 超 链接 设计 要 求 为 ， 

“首页 ”链接 到 index. html; 

“Dreamweaver 简介 ”链接 到 prac4-1. html, 在 宽 960px 的 窗口 中 打开 ; 

“ 层 与 行为 "链接 到 prac4-2. html, 在 980X620px 的 窗口 中 打开 ; 

“热点 图 像 " 链 接 到 prac4-3. html, 在 新 窗口 打开 。 

“首页 要求 直接 链接 到 ”静态 网 站 制作 实 训 网 站 ”首页 文件 Index. html;“Dreamweaver 简 
介 ” 和 *“ 层 与 行为 " 超 链 接 要 求 在 固定 的 窗口 中 打开 链接 的 网 页 ;“ 热 点 图 像 * 要 求 在 新 窗口 
中 打开 链接 的 网 页 。 在 固定 的 窗口 中 打 网 页 可 以 使 用 Dreamweaver 的 “打开 浏览 器 窗口 ” 
行为 实现 。 

(3)“ 打 开 浏 览 器 窗口 ”行为 “打开 浏览 器 窗口 ”行为 对 象 一 般 是 超 链 接 标记 ,在 单 击 
超 链 接 时 在 新 的 浏览 器 窗口 中 显示 超 链接 目标 文档 。“ 打 开 浏 览 器 窗口 ”行为 和 在 超 链接 标 
记 中 使 用 Target 属性 值 _blank 的 不 同 之 处 是 “打开 浏览 器 窗口 ”行为 可 以 定义 新 窗口 的 外 
观 。“ 打 开 浏览 器 窗口 ”行为 的 默认 事件 是 onClick。 
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注意 : 使 用 “打开 浏览 器 窗口 ”行为 打开 浏览 器 窗口 时 , 超 链接 标记 要 使 用 空 链接 。 
选中 超 链接 标记 后 ,在 “行为 ”面板 中 添加 “打开 浏览 器 窗口 "行为 ,弹出 “打开 浏览 器 窗 
口 ”对 话 框 ,如 图 4-33 所 示 。 


Ed| 
要 ur 
罕 口 开 度 : 厂 ” ”窗口 高 度 : 三 ” | 
性 : 厂 S 扣 I 具 栏 。 。 厂 站 条 区 .本 
厂 地 址 工具 栏 厂 “ 需 要 时 使 用 淋 动 条 
厂 关东 栏 三 ”调整 大 小 手柄 


让 S 称 :[ 


图 4-33 “打开 浏览 器 窗口 ?对 话 框 


“要 显示 的 URL” 文 本 框 中 应 该 填写 超 链接 目标 地 址 ;“ 窗 口 宽度 ”“ 窗 口 高 度 ” 为 打开 
窗口 的 大 小 (px);“ 属 性 ”中 的 复 选 框 如 果 处 于 没 选中 状态 , 则 窗口 中 没有 该 项 显示 。 

注意 ; 如 果 不 设置 窗口 的 大 小 , 则 “属性 ”中 的 复 选 框 设置 不 起 作用 。“ 窗 口 名 称 ” 只 
JavaScript 中 使 用 ,一 般 不 需要 设置 。 

(4) 在 低 版 本 的 Dreamweaver 中 设置 超 链 接 。 在 低 版 本 的 Dreamweaver 中 ,只 要 选中 
文本 ,在 属性 面板 中 就 可 以 为 文本 设置 超 链接 。 具 体 设 置 如 下 : 

QO@ 选中 “首页 ”文本 ,在 属性 面板 中 通过 浏览 设置 超 链接 到 网 站 首页 文件 index. html。 

@ 选中 “Dreamweaver 简介 ”文本 ,在 属性 面板 中 设置 超 链 为 “#”, 即 空 链接 。 在 “ 行 
为 ”面板 中 添加 “打开 浏览 器 窗口 "行为 。“ 要 显示 的 URL” 文 本 框 中 通过 浏览 设置 超 链 接 到 
prac4-1. html 网 页 ;“ 窗 口 宽 度 ” 设 置 为 960px; 选中 “调整 大 小 手柄 ” 复 选 框 。 

@ 选中 * 层 与 行为 "文本 ,在 属性 面板 中 设置 超 链 为 "并 ”, 即 空 链接 。 在 “行为 面板 中 添 
加 “打开 浏览 器 窗口 ”行为 。“ 要 显示 的 URL” 文 本 框 中 通过 浏览 设置 超 链接 到 prac4-2. html 网 
页 ;“ 窗 口 宽 度 ” 设 置 为 980px;“ 窗 口 高 度 ” 设 置 为 620px。 

@ 选中 “热点 图 像 * 文 本 ,在 属性 面板 中 通过 浏览 设置 超 链接 到 prac4-3. html, “目标” 
属性 选择 ”blank”。 

(5) 在 Dreamweaver CS 版 本 中 设置 超 链接 。 由 于 在 Dreamweaver CS 版 本 中 不 能 从 
文本 属性 窗口 中 设置 超 链接 ,所 以 在 Dreamweaver CS 版 本 中 完成 设计 要 求 的 导航 栏 超 链 
接 设 置 就 比较 困难 。 

在 Dreamweaver CS 版 本 中 设置 超 链接 的 一 种 方法 是 在 代码 窗口 中 直接 修改 HTML 
标记 ,设置 方法 如 下 : 

@ 选中 设置 了 CSS 样式 s2 的 超 链接 文本 后 ,打开 * 拆 分 ”窗口 ,可 以 在 代码 窗口 内 选中 
的 下 列 代码 : 

首 页 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dreamweaver 简介 &nbsp; &nbsp; &nbsp; &nbsp; 


.nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 层 页 面 布局 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 热 点 图 
像 二 /div 二 
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加 将 该 段 代码 修改 为 如 下 内 容 : 


过 a href 一 "index. html" 之 首 页 之 /a 之 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" > 
&nbsp;Dreamweaver 简介 一 /a>> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&.nbsp; 过 a href 二 "#" 之 层 页 面 布局 一 /a>> &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <a href=" 
prac4-3.html" target 王 ”blank" 盖 热点 图 像 二 /a> 


@ 在 设计 窗口 中 为 “Dreamweaver 简介 ”和 “ 层 与 行为 " 超 链接 文本 添加 “打开 浏览 器 窗 
口 ”行为 。 

在 Dreamweaver CS 版 本 中 设置 超 链接 的 另 一 种 方法 是 直接 在 单元 格 内 插入 超 链 接 ， 
设置 方法 如 下 : 

@ 设置 导航 栏 单元 格 背景 。 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ”按钮 打开 “新 建 
CSS 规则 ”对 话 框 ,新 建 一 个 “类 ”, 类 名 称 使 用 s11 ,选择 * 仅 限 该 文档 ”。 在 “背景 选项 卡 中 
设置 “背景 图 像 ” 为 images\tp4-2-1. jpg; 在 “ 方 框 ” 选 项 卡 中 设置 “高 ”为 50px。 选 中 设置 导 
航 栏 的 单元 格 , 指 定 CSS 样式 为 s11。 

@ 设置 导航 栏 文本 区 块 样式 。 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ”按钮 打开 “新 
建 CSS 规则 ”对 话 框 ,新 建 一 个 “类 ”, 类 名 称 使 用 s2 ,该 样式 与 前 面 的 样式 相同 ,内 容 为 : 


.s2{ 
font-size: 14px; 
font-weight: 600; 
color: #33CC99; 
position: relative; 
left: 100px; 
top: 14px; 
width:500px; 
height: 16px; 

} 


@ 单 击 设置 导航 栏 的 单元 格 ,使 用 “插入 ”|“ 布 局 对 象 "1“Div 标签 "命令 打开 “插入 Div 
标签 ”对话 框 ,如 图 4-34 所 示 。 


插入 Div 标签 


4-34 “插入 Div 标签 ”对 话 框 


在 “类 ”下 拉 列 表 框 中 选择 s2 ,在 设置 导航 栏 的 单元 格 插入 了 一 个 Div 标签 。 
由 选中 插入 的 Div 标签 中 的 文本 ,全 部 删除 。 使 用 “插入 ”|* 超 级 链接 ”命令 打开 “超级 
链接 ”对 话 框 ,如 图 4-35 所 示 。 
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图 4-35 “超级 链接 ”对 话 框 


“超级 链接 ”对 话 框 中 “文本 ” 框 中 是 超 链接 文本 ;“ 链 接 ” 是 需要 链接 的 文件 ;“ 目 标 " 是 
超 链接 的 target 属性 。 

对 于 每 一 个 超 链接 都 要 使 用 “插入 "|“ 超 级 链接 ”命令 来 设置 。 对 于 “首页 ” 超 链接 ,可 以 
直接 在 “超级 链接 ”对 话 框 中 设置 超 链 接 文本 和 链接 目标 index. html; 对 于 “Dreamweaver 
简介 ”和 “ 层 与 行为 ” 超 链接 的 “链接 ”属性 需要 设置 成 “#”; 对 于 “热点 图 像 ” 超 链接 除了 设 
置 “文本 “链接 ”属性 外 ,还 需要 在 “目标 "下拉 列表 框 中 选择 _blank”"。 注 意 在 超 链 接 文 本 
之 间 需 要 插入 一 些 空格 。 

@ 在 设计 窗口 中 为 “Dreamweaver 简介 ”和 *“ 层 与 行为 ” 超 链接 文本 添加 “打开 浏览 器 窗 
口 " 行 为 。 

6. 系统 日 期 显示 

如 果 只 是 插入 一 个 日 期 ,在 Dreamweaver 中 只 需 选 择 “ 插 入 ”| 日 期 ”命令 即 可 ,但 是 这 
个 日 期 是 固定 不 变 的 。 如 果 和 希望 插入 一 个 系统 日 期 , 即 跟随 计算 机 的 系统 日 期 变化 ,就 需要 
使 用 程序 代码 实现 。 

(1) 调用 JavaScript 行为 。 在 Dreamweaver 的 行为 中 ,有 “调用 JavaScript”, 即 调用 
JavaScript 脚本 程序 。 例 如 ,下 面 是 一 个 显示 系统 日 期 的 JavaScript 函数 myDate() : 

function myDate() 

{ 

var Time 一 new Date(); 
var month 一 Time.getMonth() 十 1; 
document. getElementById("rq"). innerHTML = Time. getFullYear() 十 "年 "十 month 十 "月 " 十 

Time.getDate() 十 "日 "; 

} 

JavaScript 脚本 程序 的 语法 不 是 该 教材 涉及 的 内 容 , 但 是 在 Dreamweaver 中 可 以 通过 
设置 调用 JavaScript 行为 来 完成 一 些 用 HTML 标记 不 能 完成 的 功能 。 

该 JavaScript 脚本 程序 中 读者 需要 了 解 的 是 : 

document. getElementById("rq"). innerHTM = Time. getFullYear() 十 "年 "十 month 十 "月 " 十 Time. 

getDate() 十 "日 "; 

该 段 代 码 是 给 文档 中 的 ID==“rq” 的 元 素 设置 HTML 代码 ,使 其 显示 当前 系统 日 期 。 
ID=“rq” 的 元 素 可 以 是 二 p 放 标记 ,二 div 志 标记 或 层 , 所 以 在 文档 内 需要 书写 一 个 ID 为 
“rq” 的 二 p 二 标记 二 div 二 标记 或 者 层 。 
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(2) 制作 系统 日 期 显示 。 
@ 在 Dreamweaver 代码 窗口 中 的 


<script type= "text/JavaScript"> 


</script> 


代码 段 内 加 入 上 述 JavaScript 函数 myDate() 代 码 。 注 意 字 母 大 小 写 和 单词 不 要 写 错 。 
@ 在 Dreamweaver 代码 窗口 或 在 “CSS 样式 ”面板 中 新 建 一 个 类 s3, 样 式 s3 的 定义 
如 下 : 


归 

font-weight: 800; 

color: #FFFFFF; 

position: relative; 

left: 800px; 

top: Opx; 

width: 150; 

height: 16; 

} 

定位 采用 相对 定位 是 因为 需要 将 该 元 素 放置 到 表格 单元 格 内 。 
@ 在 第 2 个 单元 格 内 容 的 后 面 加 入 标记 : 


<div class="s3" id="rq"></div> 


这 里 使 用 了 一 div 之 ,也 可 以 使 用 一 p>, 但 是 不 能 使 用 层 , 因 为 层 不 能 放置 在 表格 单元 
格 内 , 即 层 只 能 相对 于 窗口 定位 ,所 以 无 法 适应 表格 居中 对 齐 的 定位 需求 。 

@ 添加 调用 JavaScript 行为 。 在 Dreamweaver 设计 窗口 中 ,选择 “标签 选择 器 ”中 的 
去 body> 标 签 ,在 “行为 "面板 中 添加 “调用 JavaScript” 行为 ,打开 * 调 用 JavaScript” 对 话 框 ， 
如 图 4-36 所 示 。 在 JavaScript 文本 框 内 输入 JavaScript 函数 名 : myDate() 。 


调用 JavaScript 


JavaSeript: lhyDateO 


图 4-36 “调用 JavaScript” 对 话 框 


@ 预览 页 面 ,检查 日 期 的 显示 位 置 是 否 合适 。 如 果 不 合适 ,可 以 调整 s3 样式 中 的 left、 
top 属性 ,top 属性 可 以 设置 为 负数 ,因为 它 是 相对 于 该 元 素 当前 位 置 的 y 轴 坐 标 , 负 数值 可 
以 使 其 y 轴 位 置 向 上 移动 。 

7. 交换 图 像 制作 

页 面 中 部 左边 为 一 个 透明 效果 的 交换 图 像 , 即 当 鼠 标 移 到 该 图 像 上 时 ,该 处 会 显示 另 一 
幅 图 像 。 

为 了 便于 页 面 布局 ,在 页 面 表格 的 第 3 个 单元 格 内 再 嵌 套 插入 一 个 1 行 2 列 的 表格 , 表 
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格 宽度 为 960px,“ 边 框 粗细 ”设置 为 5px, “边框 颜色 ”设置 为 #006600( 注 : 在 Dreamweaver 
CS 版 本 中 ,边框 颜色 需要 在 代码 窗口 内 为 二 table 二 标记 添加 bordercolor 一 " 井 006600" 属 
性 )。 单 元 格 间 距 、 单 元 格 边 距 都 设置 为 0。 插入 表格 后 ,选中 新 插入 表格 的 第 1 列 单元 格 ， 
在 属性 面板 内 设置 单元 格 “ 宽 ”为 533px,“ 高 ”为 400px。 

制作 该 效果 的 图 像 在 Dreamweaver 中 有 如 下 两 种 方法 。 

(1) 使 用 “交换 图 像 " 行 为 。 

O@ 在 要 插入 图 像 的 单元 格 内 插入 图 片 images\tp4-3. jpg。 

@ 选中 插入 的 图 片 ,在 “行为 "面板 中 添加 “交换 图 像 ” 行 为 ,打开 如 图 4-37 所 示 的 “ 交 
换 图 像 "对 话 框 。 


交 拆 图 像 本 对 


图 4-37 “交换 图 像 ” 对 话 框 


@ 单 击 “ 浏 览 ” 按 钮 ,为 “ 设 定 原始 档 为 文本 框 选择 images\tp4-4. jpg。 

@ 保持 “鼠标 滑 开 时 恢复 图 像 ” 复 选 框 为 选中 状态 ,否则 需要 再 为 图 片 添加 “恢复 交换 
图 像 ” 行 为 。 

@ 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ?对 话 框 ,新 建 
一 个 类 ,类 名 称 使 用 s4 ,选择 * 仅 限 该 文档 ”。 在 “扩展 ?选项 卡 中 设置 


filter: alpha(Copacity 王 100，finishopacity 一 0，style 一 2); 


选中 图 像 ,指定 CSS 样式 为 s4。 

@ 保存 网 页 文件 ,浏览 页 面 效果 。 半 透明 滤 镜 效果 和 交换 图 像 行为 只 能 在 浏览 页 面 时 
才能 看 到 。 

(2) 使 用 “鼠标 经 过 图 像 ”。 

@ 选中 要 插入 图 像 的 单元 格 , 使 用 “插入 ”| “图像 对 象 ”1 “鼠标 经 过 图 像 ” 命 令 打 开 “ 插 
入 鼠标 经 过 图 像 * 对 话 框 ,如 图 4-38 所 示 。 

@ 在 “插入 鼠标 经 过 图 像 ” 对 话 框 中 将 “原始 图 像 ”选项 设置 为 images\tp4-3. jpg 图 片 ; 
为 “鼠标 经 过 图 像 * 选 择 images\tp4-4. jpg 图 片 .启用 * 预 载 鼠 标 经 过 图 像 ” 复 选 框 。 

@ 在 “CSS 样式 ”面板 中 使 用 “新 建 CSS 规则 ”按钮 打开 “新 建 CSS 规则 ?对 话 框 ,新 建 
一 个 类 ,类 名 称 使 用 s4 ,选择 “ 仅 限 该 文档 ”"。 在 “扩展 ”选项 卡 中 设置 : 


filter: alpha(opacity=100, finishopacity=0, style=2); 


选中 图 像 , 指 定 CSS 样式 为 s4。 
@ 保存 网 页 文件 ,浏览 页 面 效 果 。 
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新 入 鼠标 经 过 图 像 


:|Inagel 


: |inages/tp4-3. jpg 


: [inages/tp4-4. jpg 
回 巴 本 隐 村 经 过 图 像 


图 4-38 “插入 鼠标 经 过 图 像 ” 对 话 框 


8. 插入 Flash 动画 

选中 “交换 图 像 ” 右 面 的 单元 格 ,再 栓 套 插入 一 个 2 行 1 列表 格 。 表 格 宽 度 设置 为 
413px, 边 框 粗细 、 单 元 格 间距 .单元 格 边 距 都 设置 为 0。 选 中 第 1 行 的 单元 格 , 使 用 “插入 ”| 
“媒体 ”| Flash( 或 SWF) 命令 插入 flashesN\fl4-1. swf 动画 。 

9. 插入 GIF 动画 

选中 Flash 动画 下 面 的 单元 格 ,选择 “插入 ”| 图像” 命令 ,通过 浏览 插入 images\tp4-5. gif。 
GIF 动画 是 一 种 多 帧 的 图 像 , 所 以 插入 GIF 动画 和 插入 一 般 图 片 一 样 。 

10. 制作 版 权 信息 和 电子 邮件 链接 

Q@ 选中 表格 的 最 下 面 一 个 单元 格 , 设 置 单元 格 “ 高 "为 40px, 设 置 单元 格 “ 背 景 ?为 
images\tp4-2. jpg( 注 ; 在 Dreamweaver CS 版 本 中 ,设置 单元 格 “ 背 景 "可 以 直接 修改 二 td 二 
标记 ,如 : 二 td height= 二 "40" background 二 "images/tp4-2. jpg" 记 )。 

@ 输入 版 权 信息 ,设置 水 平 居 中 对 齐 。 

@ 插入 电子 邮件 链接 。 使 用 * 插 入 ”|* 电 子 邮件 链接 ”命令 在 “电子 邮件 链接 对话 框 内 
设置 超 链接 “文本 ”与 “E-Mail” 的 内 容 , 在 “E-Mail” 文 本 框 内 应 该 书写 电子 邮件 地 址 。 

11. 保存 文档 

保存 文档 ,浏览 网 页 。 查 看 所 有 的 超 链接 是 否 正 确 。 单 击 “ 首 页 ” 超 链 接应 该 打开 实 训 
网 站 首页 ,从 实 训 网 站 首页 中 单 击 “ 网 页 编辑 工具 ” 超 链接 按钮 ,应 该 打开 该 栏目 的 首页 。 


4.7 小 结 


本 章 主要 介绍 使 用 可 视 化 网 页 编辑 工具 Dreamweaver 编辑 静态 网 页 的 基本 方法 。 本 
章 的 内 容 是 在 HTML 标记 与 CSS 基础 上 进行 的 , 即 Dreamweaver 一 些 操作 和 属性 设置 是 
使 用 HTML 标记 与 CSS 属性 解释 的 ,掌握 了 HTML 标记 与 CSS, 使 用 Dreamweaver 就 显 
得 异常 简单 。 限 于 本 章 栏目 内 容 以 及 静态 网 站 制作 的 需求 ,Dreamweaver 的 其 他 一 些 功能 
在 教材 中 没有 涉及 。 


1. 为 什么 要 建立 本 地 站 点 ? 
2. 怎样 使 用 “文件 ”面板 上 传 和 下 载 文 件 ? 
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3. 在 Dreamweaver 中 如 何 定 义 CSS 样式 ? 
4. 如 何 为 对 象 指定 CSS 样式 ? 
5. 如 何 为 文本 添加 行为 ? 


4.9 实 训 :“ 我 们 的 宿舍 ”主题 网 站 制作 


1. 实 训 目的 

熟悉 可 视 化 网 页 编辑 工具 Dreamweaver 的 使 用 ,练习 使 用 Dreamweaver 制作 网 页 。 

2. 实 训 任 务 与 实 训 指导 

仿照 教学 项 目 网 站 中 “网 页 编辑 工具 ”栏目 设计 ,以 “我 们 的 宿舍 ”为 主题 ,使 用 自己 的 素 
材 图 片 ,完成 下 列 各 个 实 训 任务 及 网 站 发 布 。 


实 训 任务 41: 宿舍 简介 " 页 面 制 作 


使 用 自 备 图 片 和 文字 ,按照 教学 项 目 中 “Dreamweaver 简介 ?页面 设计 风格 ,制作 ”宿舍 
简介 ”网 页 prac4-1. html, 训 练 CSS 样式 定义 与 使 用 。 

(1) 在 本 地 站 点 Images 文件 夹 中 准备 一 张 宿舍 的 同学 合影 照片 tp4-6. jpg 和 一 张 适合 
作 标 题 背 景 的 图 片 。 

(2) 在 Dreamweaver 中 新 建站 点 ,“ 本 地 站 点 根 文件 夹 设 置 到 自己 的 本 地 站 点 文件 夹 ; 
根据 服务 器 Web 站 点 的 IP 地址、.FTP 账号、 密码 设置 远程 信息 。 

(3) 在 Dreamweaver 中 新 建 HTML 文件 ,另存 为 站 点 根 目 录 下 的 prac4-1. html。 

(4) 仿照 4.3 节 ,定义 CSS 样式 s1、s2, 制 作 类 似 *Dreamweaver 简介 ”页 面 的 网 页 标题 
效果 。 方 框 背景 图 片 可 以 从 Internet 上 下 载 或 自己 拍摄 ; 标题 样式 、 滤 镜 效 果 可 以 根据 自 
己 的 爱好 选择 。 仿 照 “Dreamweaver 简介 ”页 面 中 的 步骤 ,制作 网 页 标题 。 

(5) 插入 宿舍 同学 合影 照片 ,照片 大 小 调整 为 约 200X150px 大 小 。 设 置 照片 的 垂直 、 
水 平 边 距 和 对 齐 属性 ,实现 图 文 混 排 。 

(6) 输入 介绍 宿舍 以 及 各 个 同学 的 文字 信息 。 注 意 空 格 的 输入 。 

(7) 保存 文档 ,在 浏览 器 中 浏览 页 面 效 果 ( 浏 览 器 窗口 调整 到 1024 X768px)。 

(8) 上 传 prac4-1. html 及 相关 文件 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac4-1.html 


检查 网 页 发 布 是 否 正确 。 
(9) 保存 本 地 站 点 。 


实 训 任 务 4-2: 和 恰 同 学 少年 页面 制作 


使 用 自 备 同学 合影 照片 和 个 人 生活 照片 ,按照 教学 项 目 中 * 层 与 行为 "页 面 设计 风格 ,使 
用 “显示 -隐藏 层 "行为 制作 实 训 网 站 项 目 中 显示 同学 生活 照片 的 “ 恰 同 学 少年 ”网 页 prac4- 
2. html。 训 练 “ 层 ” 与 “显示 -隐藏 层 ” 行 为 应 用 技能 。 

(1) 在 本 地 站 点 images 文件 夹 中 准备 1 张 宿舍 同学 合影 照片 tp4-20. jpg 和 宿舍 中 每 
个 同学 1 张 生活 照片 。 
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(2) 在 Dreamweaver 中 打开 本 地 站 点 ,新 建 HTML 文件 ,在 本 地 站 点 中 另存 为 prac4- 
2. html。 

(3) 仿照 4.4.5 小 节 “ 层 与 行为 "页面 布局 制作 表格 布局 页 面 。 

(4) 页 面 顶部 的 Flash 动画 插入 flashes\fl4-2. swf( 以 后 再 替换 成 自己 的 作品 ) 。 

(5) 文字 标题 使 用 * 恰 同学 少年 ”文字 内 容 替 换 成 相应 的 内 容 。 在 “ 胡 姬 花 1 号 "“ 胡 
姬 花 2 号 "… 处 替换 为 各 个 同学 的 姓名 。 

(6) 在 页 面 右 侧 插入 层 , 大 小 为 533X400px,Z 轴 属 性 设置 为 1, 在 层 内 插入 宿舍 合影 
照片 tp4-20. jpg( 图 片 大 小 调整 为 533 X400px)。 

(7) 再 插入 相应 的 几 个 层 , 各 个 层 的 Z 轴 属性 依次 增加 ,将 所 有 层 对 齐 。 在 层 内 依次 
插入 同学 的 生活 照片 ,图 片 大 小 调整 为 533X400px, 将 新 插入 层 的 “可 见 性 ”属性 设置 为 
“隐藏 ”。 

(8) 将 各 个 同学 的 姓名 制作 成 空 链接 ,为 各 个 同学 姓名 制作 “显示 -隐藏 层 ”行为 。 在 浏 
览 页 面 时 ,初始 显示 宿舍 集体 生活 照 , 当 鼠 标 移动 到 某 个 同学 姓名 上 面 时 ,照片 显示 该 同学 
的 生活 照 ,鼠标 离开 后 ,依旧 显示 宿舍 集体 生活 照 。 

(9) 保存 文档 ,在 浏览 器 中 浏览 页 面 效 果 ( 浏 览 器 窗口 调整 到 1024 X768px)。 

(10) 上 传 prac4-2. html 及 相关 文件 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac4-2. html 


检查 网 页 发 布 是 否 正确 。 
(11) 保存 本 地 站 点 。 


实 训 任务 4-3: 风华 正 茂 " 页面 制 作 


使 用 同学 合影 照片 和 个 人 照片 ,按照 教学 项 目 中 “热点 图 像 " 页 面 设 计 风格 ,使 用 “设置 
层 文 本 ”行为 和 "热点 图 像 " 技 术 ,制作 实 训 网 站 项 目 中 的 “风华 正 茂 ” 网 页 prac4-3. html。 当 
鼠标 指向 某 个 同学 头 部 时 ,旁边 显示 该 同学 的 个 人 照片 。 训 练 层 布局 ,热点 图 像 和 “设置 层 
文本 ”行为 应 用 技能 。 

(1) 在 本 地 站 点 images 文件 夹 中 准备 1 张 同学 合影 照片 和 每 个 同学 的 个 人 照片 。 

(2) 在 Dreamweaver 中 打开 本 地 站 点 ,新建 HTML 文件 ,在 本 地 站 点 中 另存 为 prac4- 
3. html。 

(3) 仿照 4. 5. 3 小 节 “ 热 点 图 像 * 页 面 布局 ,插入 3 个 层 Ll1、L2、L3, 使 用 层 完 成 页 面 布 
局 ,页 面 标题 使 用 “风华 正 茂 ”。 

(4) 在 层 L1 中 插入 提示 文字 * 用 鼠标 指向 某 个 同学 的 头 部 ,网 页 右 侧 会 显示 该 同学 的 
特写 照片 ”。 

(5) 在 层 L2 中 插入 同学 合影 照片 ,图 片 大 小 调整 为 400 X300px。 

(6) 在 层 L3 中 插入 1 个 同学 的 个 人 照片 ,设置 图 片 大 小 为 533 X400px。 

(7) 选中 同学 合影 照片 ,使 用 * 圆 形 热点 工具 ?在 每 个 同学 的 头 部 制作 一 个 图 像 热 点 。 

(8) 制作 “设置 层 文本 ”行为 。 选 中 一 个 同学 的 图 像 热 点 ,添加 “设置 层 文本 ”行为 。 在 
“新 建 HTML"” 文 本 框 内 输入 HTML 标记 : 


过 img src 二 "images/ 该 同学 个 人 照片 "width 二 "533" height 二 "400" 之 


第 4 章 使 用 Dreamweaver 制 作 网 页 ( 填 Y DO 


检查 确认 行为 事件 是 “onMouseOver”。 

(9) 依次 选中 其 他 图 像 热 点 ,为 各 个 图 像 热点 制作 * 设 置 层 文 本 ”行为 。 

(10) 保存 文档 ,在 浏览 器 中 浏览 页 面 效 果 ( 浏 览 器 窗口 调整 到 1024 X768px)。 
(11) 上 传 prac4-3. html 及 相关 文件 。 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac4-3. html 


检查 网 页 发 布 是 否 正确 。 
(12) 保存 本 地 站 点 。 


实 训 任 务 4-4: 我 们 的 宿舍 " 栏目 首页 制作 


使 用 自 备 图 片 ,按照 教学 项 目 中 “网 页 编辑 工具 ”栏目 首页 设计 风格 ,制作 实 训 网 站 项 目 
中 “我 们 的 宿舍 ”栏目 首页 prac4. html。 训 练 CSS 样式 、 表 格 布局 、 超 链接 、“ 交 换 图 像 ” 行 
为 “调用 JavaScript” 行 为 的 使 用 ,训练 插入 GIF 动画 、Flash 动画 及 电子 邮件 链接 的 技能 。 

(1) 在 本 地 站 点 images 文件 夹 中 准备 2 张 同学 合影 照片 和 1 张 栏目 标题 背景 图 片 
tp4-1. jpg。 

(2) 在 Dreamweaver 中 打开 本 地 站 点 ,新 建 HTML 文件 ,在 本 地 站 点 中 另存 为 prac4. html。 

(3) 按照 4.6 节 栏 目 首页 页 面 布 局 ,制作 “我 们 的 宿舍 ”的 栏目 首页 页 面 。 标 题 背 景 使 
用 自 备 图 片 images\ tp4-1. jpg; 标题 样式 可 以 根据 自己 的 爱好 选择 。 导 航 栏 背景 使 用 
images\tp4-2-1. jpg。 超 链接 设置 如 下 。 

Q@“ 首 页”; 链接 到 实 训 网 站 首页 index. html。 

@“ 宿 舍 简 介 ”: 使 用 “打开 浏览 器 窗口 "行为 在 宽 960px 的 窗口 中 打开 prac4-1. html。 

@“ 恰 同学 少年 ”: 使 用 “打开 浏览 器 窗口 "行为 在 980 X620px 的 窗口 中 打开 prac4-2. 
html。 

@“ 风 华 正 茂 ”: 链接 到 prac4-3. html, 在 新 窗口 打开 。 

(4) 使 用 4. 6. 2 小 节 *“ 系 统 日 期 显示 ”中 编写 的 “myDate()”JavaScript 函数 ,按照 该 节 
设置 显示 系统 日 期 的 方法 ,使 用 “调用 JavaScript” 行 为 在 导航 栏 中 显示 系统 日 期 。 注 意 书 
写 代 码 时 要 注意 语句 格式 .字母 大 小 写 和 每 行 结束 的 “;”。 

(5) 使 用 同学 合影 照片 ,添加 “交换 图 像 ”行为 制作 透明 滤 镜 效果 的 交换 图 像 。 注 意 在 
插入 图 片 后 ,要 设置 图 片 的 大 小 为 533X400px。 

(6) 插入 Flash 动画 ,Flash 动画 使 用 flashes\fl4-1. swf( 以 后 再 更 换 ) 。 

(7) 插入 GIF 动画 ,GIF 动画 使 用 images\tp4-5. gif( 以 后 再 更 换 ) 。 

(8) 在 网 页 底部 单元 格 中 ,设置 背景 图 片 为 images\tp4-2. jpg, 插 入 版 权 信息 和 电子 邮 
件 链 接 。 所 有 信息 要 使 用 作者 的 真实 信息 。 

(9) 保存 文档 ,在 浏览 器 中 浏览 页 面 效果 。 

(10) 上 传 prac4. html 及 相关 文件 。 在 本 地 浏览 器 地 址 栏 输入 ， 


http://Web 服务 器 域名 地 址 /学 号 


打开 实 训 网 站 首页 ,在 实 训 网 站 首页 中 单 击 * 网 页 编辑 工具 ” 超 链接 按钮 ,检查 栏目 中 的 页 面 
显示 及 超 链 接 是 否 正确 。 
(11) 保存 本 地 站 点 。 


网 页 图 像 编 辑 


本 章 介 绍 使 用 图 像 编 辑 工具 对 网 页 图 像 进行 编辑 和 使 用 图 像 编辑 工具 制作 静态 网 页 ， 
完成 教学 网 站 项 目 中 “网 页 图 像 编辑 ”栏目 的 制作 。 


5.1 “网 页 图 像 编辑 ”栏目 设计 


该 栏目 设计 为 个 人 网 站 。 栏 目 首页 内 容 与 效果 设计 如 图 5-1 所 示 。 


开心 罕 室 相聚 校园 回忆 


和 孙 小 丫 ， 昵 称 丫 丫 * 
出 生 在 广西 桂林 漓江 岩 
边 。 处女 座 ， 性 格 活 没 ， 


欢 图 桃 、 桥 牌 ， 爱 打 网 
球 、 羽 毛 球 


2012 年 9 月 ， 我 考 入 
石家庄 部 电 职业 技术 学 
院 ， 开 始 了 我 的 大 学 生 
独 。 我 的 9 号 139668721 
， 跟 我 联系 啊 ! 


图 5-1 “网 页 图 像 编 辑 ” 栏 目 首页 设计 


其 中 导航 按钮 中 除了 “首页 ”链接 到 了 实 训 网 站 的 首页 index. html“ 作 品 欣赏 链接 到 
了 prac5-1. html 页 面 之 外 ,其 他 按钮 没有 设置 超 链接 。 
在 栏目 首页 设计 中 ,标题 栏 中 有 个 人 Logo; 网 页 的 中 部 有 类 似 嵌 入 式 框 架 或 显示 -隐藏 
层 效 果 的 设计 。 当 鼠标 移动 到 “开心 ”“ 究 室 ”“ 相 聚 ”“ 校 园 ”"“ 回 忆 ” 某 组 文字 上 时 ,在 中 
间 图 片 位 置 会 显示 相应 的 图 片 。 图 5-2 是 鼠标 移动 到 “开心 ”文字 上 面 时 的 页 面 显 示 。 
“作品 欣赏 *prac5-1. html 页 面 设计 如 图 5-3 所 示 。 
品 欣赏 ”页面 为 一 个 表格 结构 ,标题 栏 是 一 个 逐 帧 GIF 动画 (prac5-1. gif) ,交替 显示 
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欢 围棋 、 烽 牌 ， 爱 打 网 
球 、 羽 毛 球 ， 

2012 年 9 月 ， 我 考 入 
石家庄 部 电 职业 技术 学 
院 ， 开 始 了 我 的 大 学 生 
对 。 我 的 9 号 139668721， 
跟 我 联系 啊 ! 


5-2 “开心 ”页 面 显 示 


期 待 您 的 批评 指导 ”0 


Ww EY 
一 一 一 


图 5-3 “作品 欣赏 "页面 设计 


文字 “欢迎 欣赏 Y 丫 作品 "和 “期 待 您 的 批评 指导 ”。 
第 1 行 的 3 个 作品 是 图 像 作品 ,列举 如 下 。 
(1) 矢量 图 形 编辑 : prac5-2. jpg, 文 字 位 图 填充 变形 、 位 图 填充 花 球 .贴图 笔 简 。 


(YXX @ 静态 网 站 制作 项 目 教程 


(2) 位 图 图 像 编辑 : prac5-3. jpg, 人 物 图 像 克 隆 。 

(3) 位 图 蒙 版 : prac5-4. jpg, 位 图 蒙 版 效果 。 

第 2 行 的 3 个 作品 是 GIF 动画 作品 ,列举 如 下 。 

(1) 透明 度 变 化 GIF 动画 : prac5-5. gif, 使 图 片 发 生 透 明度 变化 的 GIF 动画 。 

(2) 位 置 变化 GIF 选择 动画 : prac5-6. gif, 使 用 带 飞机 的 素材 图 片 制作 的 机 场 飞机 不 断 
起 飞 的 GIF 动画 。 

(3) 分 散 到 帧 GIF 动画 : prac5-7. gif ,一 个 月 亮 按 弧 形 轨道 落 山 的 GIF 动画 。 

最 下 面 “ 返 回 ? 超 链接 用 于 返回 该 栏目 首页 。 


5.2 图 像 编辑 工具 与 图 像 编 辑 基础 


5.2.1 图 像 编 辑 工具 


网 页 的 内 容 一 般 都 是 图 文 并 茂 的 ,而 且 在 追求 美感 的 网 页 设计 中 ,网 页 设计 越 来 越 趋向 
广告 平面 设计 。 在 网 页 设计 中 ,人 们 已 经 不 满足 于 在 网 页 中 插入 采集 的 图 片 ,而 常见 的 是 使 
用 图 像 编 辑 工具 直接 设计 一 个 整体 效果 的 网 页 。 

网 页 的 下 载 时 间 主 要 受 网 页 中 图 像 和 动画 的 数量 、 大 小 影响 。 网 页 中 文本 信息 占用 的 
存储 空间 一 般 不 会 超过 几 KB, 但 普通 数码 相机 拍摄 的 一 张 照片 即便 是 压缩 后 一 般 也 在 几 
百 KB 以 上 ,所 以 普通 照片 一 般 不 能 在 网 页 中 直接 使 用 。 虽然 Internet 上 有 许多 网 页 素材 
图 片 ,但 制作 自己 的 网 站 时 ,图 片 素 材 一 般 需 要 自己 采集 。 自 己 采集 的 图 片 文件 就 需要 经 过 
处 理 之 后 成 为 适合 在 网 页 中 使 用 的 图 像 文件 ,这 就 需要 使 用 图 像 编辑 工具 。 

在 图 像 编 辑 工具 中 最 著名 的 是 Adobe Photoshop。 只 要 提起 图 像 编 辑 ,平面 设计 ,一 般 
第 一 反应 就 是 Photoshop ,因为 该 款 软件 太 著名 了 。 在 影楼 ,广告 设计 、 网 页 设计 中 都 在 使 
用 Photoshop。 甚 实 网 页 制作 三 剑客 中 的 Fireworks 也 是 一 款 非常 出 色 的 图 像 编 辑 工具 。 
Fireworks 不 仅 能 完成 图 像 编 辑 ` 图 像 效果 处 理 、.GIF 动画 制作 ,而 且 还 能 和 Dreamweaver 
做 到 无 颖 结合 。 

Photoshop 与 Fireworks 相 比 较 ,Photoshop 在 图 像 编辑 方面 比 Fireworks 功能 更 加 强 
大 ,Photoshop 的 图 像 编 辑 工 具 较 多 ,参数 设置 灵活 ,可 以 根据 需要 设置 各 种 图 层 样式 ; 
Photoshop 具有 众多 的 滤 镜 ,可 以 对 图 像 添加 较 多 的 滤 镜 效果 。 但 是 对 于 网 页 设计 来 说 ， 
Fireworks 比 Photoshop 没有 逊色 多 少 。 常 见 的 图 像 效 果 、 图 像 处 理 Fireworks 都 能 够 完 
成 ,而 且 使 用 Fireworks 要 比 Photoshop 简单 得 多 , Fireworks 更 适合 于 网 页 制作 的 初 
学 者 。 

Photoshop 与 Fireworks 是 两 种 图 像 编 辑 工具 ,各 有 所 长 ,不 能 简单 地 说 谁 好 谁 差 。 至 
于 选用 哪个 是 由 对 这 些 工 具 的 熟悉 程度 确定 的 。 一 些 只 熟悉 Photoshop 的 人 认为 Photoshop 
是 最 好 的 ,其 实 只 是 不 熟悉 Fireworks 而 已 。 如 果 Fireworks 没有 骄 人 之 处 ,Adobe 公司 也 
就 不 会 花 重金 收购 它 了 。 现 在 Photoshop 和 Fireworks 都 是 Adobe 公司 旗下 的 产品 ,它们 都 
在 不 断 升 级 换代 ,足以 说 明 Fireworks 在 网 页 设计 制作 方面 的 强势 。 在 网 页 编辑 (设计 ) 职 业 资 
格 认证 考试 中 ,一 般 都 是 4 个 科目 选择 3 个 。4 个 考试 科目 是 : Dreamweaver、 Fireworks、 
Photoshop、Flash, 其 中 Fireworks 和 Photoshop 选择 一 个 科目 。 
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在 本 教材 中 ,考虑 到 课时 因素 以 及 初学 者 的 特点 ,图 像 编辑 工具 选择 Fireworks, 对 于 
熟悉 Photoshop 的 读者 也 可 以 使 用 Photoshop 完成 本 章 的 所 有 教学 任务 。 


5.2.2 网 页 中 常用 的 图 像 格式 


基于 不 同 的 压缩 处 理 技术 ,电子 图 像 文件 有 多 种 类 型 。 各 种 类 型 的 图 片 文件 在 网 页 中 
都 可 以 使 用 。 但 一 些 类 型 文件 ,例如 BMP 格式 图 片 、TIFF 格式 图 片 ,由 于 它们 的 字 节 ( 存 
储 ) 尺 寸 较 大 ,一 般 不 适合 在 网 页 中 使 用 。 在 网 页 中 常用 的 图 像 文 件 类 型 如 下 。 

1. GIF 格式 

GIF( 图 形 交 换 格 式 ) 是 一 种 很 流行 的 网 页 图 形 格式 。GIF 中 最 多 支持 256 种 颜色 。 
GIF 还 可 以 包含 透明 区 域 和 多 个 动画 帧 。 在 导出 为 GIF 格式 时 ,纯色 区 域 图 像 的 压缩 质量 
最 好 。GIF 通常 适合 于 卡通 、 微 标 、 包 含 透明 区 域 的 图 形 以 及 动画 。 由 于 GIF 格式 的 图 像 
中 只 有 256 种 颜色 ,一般 彩色 照片 转换 为 GIF 格式 后 会 产生 失真 。 

2. JPEG 格式 

JPEG 是 由 Joint Photographic Experts Group( 联 合 图 像 专家 组 ) 专 门 为 照片 或 增强 色 
图 像 开 发 的 。JPEG 支持 数 百 万 种 颜色 (24 位 )。JPEG 格式 最 适合 于 保存 扫描 的 照片 、 使 
用 纹理 的 图 像 和 任何 需要 256 种 以 上 颜色 的 图 像 。JPEG 图 像 的 字 节 大 小 和 图 像 质量 与 压 
缩 品 质 有 关 ,一 般 压 缩 品 质 在 60 一 100 之 间 ,数值 越 小 压缩 率 越 高 ,但 图 像 质量 越 差 。 

3. PNG 格式 

PNG, 即 可 移植 网 络 图 形 ,是 一 种 通用 的 网 页 图 形 格式 。 但 是 ,并 非 所 有 的 网 页 浏览 器 
都 能 查看 PNG 图 形 。PNG 最 多 可 以 支持 32 位 的 颜色 ,可 以 包含 透明 度 或 Alpha 通道 ,并 
且 可 以 是 连续 的 。PNG 是 Fireworks 本 身 的 文件 格式 。 但 是 ,Fireworks PNG 文件 包含 应 
用 程序 特定 的 附加 信息 ,导出 的 PNG 文件 或 在 其 他 应 用 程序 中 创建 的 PNG 文件 中 不 存储 
这 些 信息 。 

这 3 种 格式 图 像 文件 都 是 压缩 格式 的 文件 , 字 节 尺寸 比较 小 ,所 以 适合 在 网 页 中 使 用 。 


5.2.3 矢量 和 位 图 图 形 


1. 矢量 图 形 

矢量 图 形 使 用 称 为 “矢量 ”的 线段 (包含 颜色 和 位 置信 息 ) 定 义 图 像 。 一 个 矢量 图 形 是 用 
一 系列 描述 图 像 轮 廓 的 点 来 定义 图 形 轮廓 ,使 用 填充 颜色 描述 定义 图 像 区 域 。 矢 量 图 形 与 
分 辩 率 无 关 ,调整 矢量 图 形 大 小 ,更改 矢 量 图 形 形 状 不 会 改变 其 外 观 品质 。PNG 类 型 文件 
中 可 以 保存 矢量 图 形 。 

2. 位 图 图 形 

位 图 图 形 由 排列 成 网 格 的 称 为 “像素 ”的 点 组 成 。 计 算 机 的 屏幕 就 是 一 个 大 的 像素 网 
格 。 在 位 图 中 ,图 像 是 由 网 格 中 每 个 像素 的 位 置 和 颜色 值 决定 的 。 每 个 点 被 指定 一 种 颜色 ， 
就 像 马赛 克 贴 砖 那样 拼合 在 一 起 形成 图 像 。 编 辑 位 图 图 形 是 修改 图 像 的 像素 。 放 大 位 图 图 
形 通 常会 使 图 像 出 现 马 赛 克 效果 。. bmp、 tiff、. gif、. jpeg 等 类 型 文件 都 是 位 图 图 形 文件 。 

3. 编辑 矢量 图 形 和 位 图 图 形 

Fireworks 中 既 包 含 矢 量 工具 ,又 包含 位 图 工具 ,能 够 编辑 这 两 种 格式 的 文件 。 但 是 在 
Fireworks 中 制作 的 矢量 图 形 如 果 保 存 或 导出 为 . gif、. jpeg 格式 文件 ,文件 中 的 矢量 图 形 将 
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变 为 位 图 图 形 。 如 果 需 要 保持 矢量 图 形 , 只 能 将 文件 保存 为 . png 类 型 文件 。 
5.3 Fireworks 基本 操作 


5.3.1 Fireworks 的 工作 窗口 


中 文 Fireworks 8.0 的 工作 窗口 如 图 5-4 所 示 。 


菜单 栏 预览 视图 快速 导出 面板 组 
CE | = 


选择 G) 修改 虽 文本 I) 命令 CC) 泥 镜 了 [) 窗口 四， 帮助 0D 


日 | 三 1B 网 页 屋 加 


一 
而 口 乃 

视 国 图 像 大 小 ,,， 符合 画布 加 
50 

已 Q 
工具 条 画布 属性 面板 播放 按钮 ”画布 尺寸 。 缩放 比例 


图 5-4 中文 Fireworks 8.0 的 工作 窗口 


(1) 菜单 栏 : 提供 菜单 操作 命令 。 

(2) 工具 箱 : 包括 选择 工具 、 位 图 工具 ,矢量 工具 .Web 工具 、 颜 色 工具 和 视图 工具 。 

(3) 画布 : 进行 图 像 制 作 、 处 理 的 区 域 。 

(4) 预览 视图 : 在 导出 图 像 之 前 ,可 以 通过 对 比方 式 查看 导出 文件 的 大 小 。 “原始 ” 指 
图 像 的 编辑 区 域 ,只 有 在 “原始 ”视图 中 才能 编辑 图 像 ;“ 预 览 "中 的 “2 幅 *“4 幅 ” 是 指 图 像 
的 预览 模式 。 利 用 多 幅 图 像 预览 和 分 别 设置 每 幅 图 像 的 导出 格式 可 以 比较 优化 结果 。 

(5) 属性 面板 : 也 称 作 属 性 检查 器 ,显示 和 设置 画布 中 对 象 的 属性 。 

(6) 面板 组 : 各 种 操作 面板 。 通 过 “窗口 ”菜单 可 以 打开 更 多 的 面板 。 
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(7) 播放 按钮 : 预览 GIF 动画 的 控制 按钮 。 

(8) 画布 尺寸 : 当前 画布 的 大 小 设置 。 

(9) 缩放 比例 : 画布 的 显示 比例 。 

(10) 快速 导出 : 将 图 像 导 出 到 其 他 工具 的 文档 格式 。 

Fireworks 在 2005 年 被 Adobe 公司 收购 之 后 ,在 Adobe Fireworks CS 版 本 中 对 原来 
版 本 进行 了 一 些 改进 ,在 滤 镜 中 增加 了 Photoshop 动态 效果 ,增加 了 与 Photoshop 类 似 的 路 
径 编 辑 ,但 减少 了 一 些 属性 设置 ,图 像 的 大 小 、 位 置信 息 需 要 在 “信息 ?面板 中 才能 查询 ; 窗 
口 界面 发 生 了 一 些 变化 ,增强 了 对 Windows7 的 支持 ,但 是 从 功能 上 没有 太 大 的 变化 。 图 5-5 
是 Adobe Fireworks CS5 的 工作 窗口 。 


国 当 区 [Do I» 展开 模式 ”| 区 3] 


文件 E) 编辑 (E) 视图 (VW) 选择 (S) 修改 M) 文本 (了 命令 (中 ” 滤 镜 QD) 窗口 (W) 帮助 () 
hz.jipg ;页面 1 @ 100% (位 图 ) 国 
下 卫生 约 国信 蝎 [02 起 轩 4 名 1 | 上 


533 x 400 | 100% » 


Bm]s[ER ， 避 
ES 
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5.3.2 Fireworks 文档 操作 


1. 新 建文 档 

在 Fireworks 开始 页 中 选择 “Fireworks 文 
件 ” 或 “文件 ”1“ 新 建 " 命 令 , 打 开 “ 新 建文 档 ” 对 话 
框 ,如 图 5-6 所 示 。 

在 “新 建文 档 " 对 话 框 中 可 以 设置 新 建文 档 
的 画布 大 小 ,分 辩 率 一 般 不 要 改动 。 

“画布 颜色 ”相当 于 背景 色 , 可 以 根据 需要 
设置 。 选 择 “ 透 明 ” 时 ,图 像 可 以 到 加 到 其 他 图 图 5-6 “新 建文 档 " 对 话 框 
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像 上 。 
2. 文档 “属性 ”面板 
单 击 文档 的 画布 ,“ 属 性 ”面板 显示 文档 的 属性 。 文 档 “ 属 性 ”面板 如 图 5-7 所 示 。 


文档 画布 「 | 。 画布 大 小 .。 | 。 图 人 大小... 符合 画布 
| | m[ | 习 


默认 导出 选项 
图 5-7 文档 * 属 性 ”面板 


在 文档 * 属 性 ”面板 中 ,可 以 设置 画布 的 颜色 、 画 布 的 大 小 。“ 符 合 画 布 ”按钮 用 于 使 画布 
的 大 小 符合 画布 中 图 像 的 大 小 。“ 默 认 导出 选项 ?中 可 以 选择 导出 的 文件 类 型 。 

“图 像 大 小 ?按钮 用 于 设置 保存 和 导出 图 像 的 大 小 。 

在 “修改 菜单 中 修改 文档 属性 ,使 用 "修改 "|* 画 布 ?命令 。 在 “画布 ?菜单 中 有 ”图像 大 
小 ”“ 夯 布 大 小 ”“ 夯 布 颜色 ”“ 符 合 画 布 ”等 命令 。 

3. 保存 文档 

选择 “文件 ”1 “另存 为 ”命令 ,打开 “另存 为 对话 框 ,在 “保存 文件 类 型 " 框 中 可 以 选择 保 
存 文件 的 类 型 ,默认 的 保存 类 型 为 . png。 

4. 打开 和 导入 文档 

在 Fireworks 菜单 中 选择 “文件 ”1“ 打 开 ” 命 令 , 可 以 打开 各 种 格式 的 图 像 文 件 。 打 开 一 
个 图 像 文 件 时 ,画布 自动 符合 图 像 的 大 小 。 在 一 个 文档 中 只 能 打开 一 个 图 像 。 

在 Fireworks 菜单 中 选择 “文件 ”|“ 导 入 ”命令 ,可 以 导入 各 种 格式 的 图 像 文 件 。 导 入 的 
图 像 可 以 放置 在 画布 的 任意 位 置 。 如 果 需 要 画布 符合 图 像 的 大 小 ,可 以 在 选中 画布 后 , 单 击 
“属性 ?面板 中 的 “符合 画布 按钮 。 

在 一 个 文档 中 可 以 导入 多 个 图 像 文 件 , 从 而 可 以 实现 多 个 图 像 的 县 加 、 组 合 等 处 理 。 

5. 预览 图 像 

可 以 使 用 菜单 “文件 ”1“ 在 浏览 器 中 预览 ”命令 ,或 使 用 F12 键 预览 图 像 在 浏览 器 中 的 
显示 效果 。 


5.3.3 图 像 的 优化 与 导出 


网 页 图 像 编 辑 的 最 终 目 标 是 创建 能 被 尽 可 能 快 地 下 载 的 精美 图 像 。 为 此 ,必须 在 最 大 
限度 地 保持 图 像 品 质 和 选择 压缩 质量 最 高 的 文件 格式 之 间 寻 找 一 种 平衡 ,这 种 平衡 就 是 优 
化 , 即 寻 找 颜 色 .压缩 和 品质 的 最 佳 组 合 。 

Fireworks 中 的 文档 可 以 另存 为 GIF JPEG 等 类 型 的 图 像 文件 ,也 可 以 改变 图 像 的 大 
小 。 导 出 图 像 不 仅 可 以 指定 导出 的 图 像 类 型 和 图 像 的 大 小 ,还 可 以 对 图 像 进行 优化 。 

1. 图 像 优化 

图 像 优 化 ,一 般 使 用 “优化 ”面板 与 文档 窗口 中 的 “预览 "窗口 配合 完成 ,以 便 可 以 更 好 地 
控制 优化 过 程 , 找 到 颜色 .压缩 和 品质 的 最 佳 组 合 。 

“优化 ”面板 如 图 5-8 所 示 ,其 中 图 5-8(a) 是 导出 为 JPEG 文件 时 的 “优化 ”面板 ,图 5-8(b) 
是 导出 为 GIF 文件 时 的 “优化 ”面板 。 
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Ee EE 


是 日 本 
保存 的 设置 FF 可 
web 216 色 了 | 颜色 : Re Ma 


导出 文件 设置 。 (a) 透明 选择 
使 用 颜色 色 板 


添加 、 删 除 颜 色 
二 | 


颜色 排序 一 一 排序 全 区 :元 本 了 对 直 
添加 、 删 除 、 选 择 透明 色 一 蕊 芋 匡 | 避 加 | 问 | 要 | 下 


(b) 


5-8 “优化 ”面板 


“保存 的 设置 ?列表 框 中 可 以 选择 系统 设置 好 的 几 种 导出 方式 ;“ 导 出 文件 设置 ?列表 框 
中 可 以 选择 GIF、JPEG、PNG、TIFF、BMP 等 导出 类 型 。 对 于 网 页 图 像 , 一 般 使 用 GIF、 
JPEG 较为 普遍 。 

在 导出 类 型 选择 JPEG 时 ,图 像 优 化 的 主要 选项 有 “品质 "和 “平滑 ”。“ 品 质 ” 越 高 ,图 像 
质量 越 好 ,但 图 像 字 节 尺寸 就 越 大 ;“ 平 滑 ” 有 0 一 8 级 选项 ,数值 越 大 ,图 像 清晰 度 越 差 ,图 
像 字 节 尺寸 越 小 。 

在 导出 类 型 选择 GIF 时 ,图 像 优 化 的 主要 选项 有 “失真 ”和 ”抖动 "。“ 抖 动 越 高 ,图 像 
质量 越 好 ,但 图 像 字 节 尺 寸 就 越 大 ;“ 失 真 ” 越 大 ,图 像 质 量 越 差 , 字 节 尺寸 越 小 。“ 颜 色 ” 对 
GIF 图 像 的 质量 和 字 节 尺寸 也 有 影响 。 当 “颜色 ” 数 选择 2 时 ,图 像 就 变 成 了 黑白 图 像 ,当然 
字 节 尺寸 会 变 得 很 小 。 

导出 GIF 图 像 的 “透明 选择 ”设置 中 一 般 图 像 为 “不 透明 ”。 对 于 背景 为 透明 的 图 像 , 需 要 
选择 “索引 色 透明 ”。“ 透 明 选 择 ” 中 的 “Alpha 透明 度 ” 选 项 一 般 用 于 渐变 透明 和 半 透 明 的 图 形 。 

GIF 图 像 导出 “优化 ”面板 中 的 色 板 表示 导出 图 像 中 使 用 的 颜色 ,可 以 通过 添加 、 删 除 颜 
色 按钮 添加 或 删除 色 板 中 的 颜色 。 

2. 导出 图 像 

使 用 “文件 ”1* 导 出 ”命令 ,在 “导出 ”对 话 框 中 导出 的 文件 类 型 是 优化 面板 中 确定 的 类 
型 。“ 导 出 ”的 内 容 可 以 选择 * 仅 图 像 ” 或 “HTML 和 图 像 *。 如 果 需 要 直接 导出 为 包含 该 图 
像 的 HTML 网 页 文档 ,可 以 选择 “HTML 和 图 像 ”。 


5.3.4 图 像 大 小 编辑 


在 网 站 制作 中 经 常 使 用 数码 相机 采集 素材 ,但 一 般 数码 相机 拍摄 的 照片 尺寸 都 比较 大 。 
一 般 分 辩 率 越 高 ,图 片 尺 寸 越 大 。 在 HTML 的 二 img 之 标记 中 虽然 可 以 指定 图 像 的 宽 .高 
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参数 控制 图 片 的 显示 大 小 ,但 是 图 片 的 存储 尺寸 并 没有 发 生变 化 。 在 图 像 编辑 工具 中 可 以 
对 图 片 大 小 进行 编辑 。 在 Fireworks 中 编辑 图 像 大 小 可 以 使 用 下 面 两 种 方法 之 一 。 

1. 修改 图 像 大 小 

在 Fireworks 中 打开 要 编辑 的 图 片 ,在 菜单 
栏 中 选择 “修改 "| “画布 ?|* 图 像 大 小 ?命令 , 打 
开 “ 图 像 大 小 ”对 话 框 ,如 图 5-9 所 示 。 

在 “图 像 大 小 ”对 话 框 中 通过 修改 “像素 尺 
寸 " 来 改变 图 像 的 大 小 。 在 “约束 比例 ” 复 选 框 
被 选中 时 ,只 需要 修改 宽 或 高 中 的 一 个 参数 。 
在 修改 图 像 大 小 时 ,“ 图 像 重新 取样 " 复 选 框 是 
必须 要 选中 的 。 虽 然 在 “图 像 重 新 取样 > 中 有 
“ 双 立 方 *"“ 双 线性 ”等 计算 方法 ,但 修改 图 像 大 图 5-9 “图 像 大 小 ”对 话 框 
小 一 般 是 将 图 片 尺寸 缩小 ,稍微 放大 一 些 也 可 
以 ,如 果 放 大 尺寸 超过 1 倍 ,图 像 质 量 就 会 很 差 ,就 是 在 Photoshop 中 也 是 一 样 。 

2. 图 像 预览 

使 用 菜单 中 的 “文件 "| 图像 预览 ”命令 可 以 完成 图 像 的 优化 、 修 改 图 像 的 大 小 和 图 像 的 
导出 。“ 图 像 预览 ?对 话 框 如 图 5-10 所 示 。 


N 芷 六 Jo 梧 回 口 瑟 
[sm | 


图 5-10 “图 像 预览 ”对 话 框 


在 “图 像 预 览 ” 对 话 框 的 “选项 ”选项 卡 中 ,可 以 完成 对 图 像 的 优化 设置 ,其 操作 界面 和 
“优化 ”面板 类 似 ; 在 “文件 ”选项 卡 中 ,可 以 通过 修改 “缩放 ”的 “%” 对 图 像 进 行 缩放 ; 也 可 以 
通过 修改 “ 宽 ”“ 高 "参数 设置 导出 图 像 的 大 小 ,其 操作 与 设置 图像 大 小 ”对 话 框 参 数 类 似 。 如 
果 需 要 只 导出 图 像 的 部 分 区 域 ,可 以 选中 “导出 区 域 " 复 选 框 ,填写 “导出 区 域 "参数 组 的 参数 。 
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5.3.5 图 层 操作 


Fireworks 使 用 图 层 组 织 图 像 文档 结构 。 图 层 文档 结构 使 文档 组 织 清晰 ,避免 图 形 对 
象 的 相互 干扰 。 在 画布 之 上 可 以 有 多 个 图 层 ,每 个 图 层 内 还 可 以 有 多 个 图 形 对 象 。 对 图 层 
及 层 内 对 象 的 操作 可 以 使 用 “ 层 "面板 完成 。“ 层 "面板 如 图 5-11 所 示 。 

(1) 选择 活动 层 及 对 象 : 单 击 层 或 层 内 对 象 。 展开 / 折 又 层 

(2) 锁定 /编辑 层 : 单 击 层 中 该 列 位 置 ,会 出 。 | 品 示 / 隐 牙 避 /papy 

9 en 入 pe 锁定 /编辑 层 “人 
现 * 锁 ”图 标 或 “ 铬 笔 " 图 标 。“ 锁 ”图 标 表示 层 或 对 
象 处 于 锁定 状态 ,不 受 其 他 图 形 及 编辑 命令 影响 。 
显示 “铅笔 "图 标的 层 为 当前 活动 层 ,表示 本 层 处 
于 可 编辑 状态 。 

(3) 显示 /隐藏 层 : 可 以 控制 图 层 及 图 形 对 象 ” 宇 贺 活动 层 


的 显示 与 隐藏 。 a *| 旺 形 自动 形状 
(4) 新 建 /复制 层 : 单 击 “ 新 建 /复制 层 ” 按 钮 a | 加 se。 


可 以 新 建 一 个 图 层 。 选 中 一 个 图 层 ,用 鼠标 拖 动 


到 “新 建 /复制 层 "按钮 ,可 以 复制 该 图 层 。 snes Te” 
(5) 调整 层 及 对 象 位 置 : 画布 中 显示 的 图 像 

前 后 位 置 与 * 层 "面板 中 层 与 层 内 对 象 的 上 下 排列 新 建 /复制 层 

顺序 是 一 致 的 。 拖 动 层 在 * 层 "面板 中 的 位 置 或 拖 图 5-11 “ 层 "面板 

动 图 形 对 象 在 层 内 的 位 置 都 可 以 改变 图 形 对 象 在 

画布 上 的 上 下 位 置 。 


5.4 矢量 图 形 编辑 


矢量 图 形 和 一 般 的 位 图 图 像 不 同 , 矢 量 图形 的 创建 、 编 辑 需要 使 用 矢量 图 形 编辑 工具 。 
在 矢量 图 形 编辑 中 ,除了 矢量 工具 之 外 ,还 需要 使 用 颜色 工具 、 选 择 工 具 等 。 


5.4.1 颜色 工具 箱 


图 形 是 由 边线 和 填充 组 成 的 。 在 Fireworks 中 ,边线 和 填充 都 可 以 单独 指定 颜色 。 如 
果 边 线 为 透明 色 , 即 图 形 是 由 填充 色 组 成 的 ; 如 果 图 形 的 填充 色 为 透明 色 , 则 图 形 只 有 边 
线 。 边 线 和 填充 不 能 同时 是 透明 色 。 

笔触 (边线 ) 和 填充 颜色 从 Fireworks“ 颜 色 ” 工 具 箱 中 选择 。Fireworks“ 颜 色 ” 工 具 箱 如 
图 5-12 所 示 。 


颜色 
“ 漓 管 "工具 一 又 蝶 ] 一 填充 工具 
透明 色 、|Z 剧 生 一 笔触 色 
-一 填充 色 
设置 默认 笔触/ 填充 色 一 则 加配 | 一 交换 笔触 /填充 色 


图 5-12 “颜色 ”工具 箱 
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“笔触 色 ” 用 于 选择 图 形 边线 的 颜色 ,“ 填 充 色 ” 用 于 选择 图 形 填 充 部 分 颜色 。“ 滴 管 " 工 
具 可 以 从 图 像 中 选择 颜色 。 

填充 工具 中 有 “油漆 桶 工具 ”和 “渐变 工具 ”,“ 渐 变 工具 ”有 单 击 和 拖 动 两 种 填充 方式 ， 
于 控制 渐变 填充 的 位 置 和 方向 。 在 颜色 框 中 为 “/” 时 ,表示 透明 色 ( 无 颜色 )。 


5.4.2 矢量 工具 


在 Fireworks 中 制作 矢量 图 形 使 用 工具 箱 中 的 “矢量 工具 。 

Fireworks“ 矢 量 ” 工 具 箱 如 图 5-13 所 示 。 其 中 路 径 工具 、 几 何 图形 工 具 和 修改 路 径 工 
具 中 包含 一 组 工具 , 单 击 其 下 拉 按 钮 可 以 选择 其 中 的 其 他 工具 。 

1. 直线 工具 

使 用 直线 工具 可 以 绘制 矢量 直线 。 如 果 需 要 绘制 45 斜 线 ,可 以 按 住 Shift 键 。 

2. 几何 图 形 工具 

使 用 几何 图 形 工具 可 以 绘制 矩形 .椭圆 ,多 边 形 等 几何 图 形 。 几 何 图 形 工具 中 包含 的 几 
何 图 形 种 类 如 图 5-14 所 示 。 在 几何 图 形 工具 中 ,水 平 线 上 面 的 工具 可 以 配合 Shift、Alt 刍 
使 用 ,而 水 平 线 下 面 的 工具 可 以 通过 拖 动 控制 点 改变 图 形 形 状 。 


口 “矩形 " 工具 轨 
v 口 “ 情 回 " 工具 信 


矢量 人 〇 智能 多 边 形 
直线 工具 一 2 外 | 路径 工 具 中 证 
几何 图 形 工具 一 | QA | 文本 工具 GE 2 
修改 路 径 工具 一 2 一 刀子 工具 a 
下 拉 按 钮 (el 


图 5-13 “矢量 ”工具 箱 图 5-14 几何 图 形 工具 


(1) 绘制 椭圆 . 圆 形 。 使 用 “椭圆 ”工具 ,在 画布 上 可 以 拖 出 任意 的 椭圆 ; 按 住 Shift 键 ， 
可 以 拖 出 一 个 圆 形 。 如 果 需 要 从 中 心 向 四 周 展开 ,需要 按 住 Alt 键 。 

(2) 绘制 矩形 正方形。 使 用 "矩形 ?工具 ,在 画布 上 可 以 拖 出 任意 的 矩形 ; 按 住 Shift 
键 , 可 以 拖 出 一 个 正方 形 。 如 果 需 要 从 中 心 向 四 周 展开 ,需要 按 住 Alt 键 。 如 果 需 要 绘制 圆 
角 和 矩形 ,可 以 在 “属性 ”面板 中 设置 “矩形 圆 度 ”。 如 果 绘 制 一 个 正方 形 ,“ 和 矩形 圆 度 ” 选 择 100 
时 ,会 得 到 一 个 正 圆 。 

(3) 绘制 多 边 形 。 当 选中 “多 边 形 ” 工 具 时 ,“ 属 性 ”面板 为 “多 边 形 "工具 属性 。 低 版 本 
Fireworks“ 多 边 形 ” 工 具 属 性 面板 如 图 5-15 所 示 。 

在 “多 边 形 ”工具 属性 面板 中 ,“ 形 状 * 中 有 “ 星 形 ” 和 “多 边 形 ” 两 个 选项 ;“ 边 ”为 选择 多 
边 形 的 边 数 ;“ 角 度 ” 只 对 “ 星 形 ”起 作用 ,表示 角 的 锐 度 。“ 自 动 " 复 选 框 选中 时 ,会 自动 调节 
角 的 锐 度 。 
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图 5-15 “多 边 形 ” 工 具 属 性 面板 


使 用 “多 边 形 ” 工 具 绘 制 星 形 时 ,如 果 超 过 了 五 角 , 其 星 形 效 果 较 差 。 所 以 在 Fireworks 
CS 版 本 中 ,“ 多 边 形 ” 工 具 属 性 面板 中 只 有 “形状 ”选择 ,选择 “ 星 形 ” 后 只 能 绘制 五 角 星 。 绘 
制 星 形 时 最 好 使 用 几何 图 形 工具 中 的 “ 星 形 "工具 。 

使 用 “ 星 形 "工具 绘制 星 形 时 ,绘制 出 的 星 形 上 有 5 个 调整 手 刚度 1 
柄 ,如 图 5-16 所 示 。 拖 动手 柄 调节 星 形 的 参数 如 下 。 国度 2 

GO 点 数 : 调整 角 的 个 数 。 

@ 半径 1: 调节 外 半径 。 

@ 半径 2: 调节 内 半径 。 

@ 圆 度 1: 调节 外 角 锐 度 。 

@ 圆 度 2: 调节 内 角 锐 度 。 图 5-16 星 形 调整 手柄 

3. 矢量 路 径 工具 

矢量 直线 工具 绘制 的 直线 、 几 何 图 形 工具 绘制 的 图 形 边线 都 是 矢量 路 径 。 路 径 工具 中 
常用 的 有 两 个 工具 :“ 钢 笔 工 具 和 “矢量 路 径 " 工 具 。 

“钢笔 工具 用 于 绘制 闭合 的 曲线 路 径 。“ 钢 笔 工 具 绘 制 的 曲线 又 称 为 贝 塞 尔 曲 线 。 贝 
塞 尔 曲线 上 有 控制 点 可 以 拖 动 。 拖 动 贝 塞 尔 曲线 控制 点 可 以 产生 各 种 曲线 效果 ,读者 可 以 
自己 体验 。 

“矢量 路 径 "工具 可 以 绘制 任意 的 曲线 路 径 。 

5.4.3 矢量 图 形 编辑 

1. 使 用 “选择 "工具 

“选择 "工具 箱 中 的 工具 有 选择 被 编辑 对 象 的 工具 和 对 矢量 图 形 、 位 图 图 形 进 行 编辑 的 
工具 。 其 中 “部 分 选取 ”工具 只 能 用 于 矢量 图 形 编辑 。“ 选 择 ”工具 箱 如 图 5-17 所 示 。 

(1) 选取 工具 。 选 取 工 具 中 包含 “指针 ”工具 和 “选择 后 方 对 象 ”工具 。“ 指 针 ” 工 具 用 于 
选择 被 编辑 的 对 象 ; “选择 后 方 对 象 ”工具 用 于 选择 被 图 像 谈 挡 的 后 方 对 象 。 

(2)“ 部 分 选取 工具。 用 于 选择 矢量 路 径 上 的 控制 点 。 当 使 用 * 部 分 选取 "工具 选取 被 
编辑 对 象 后 ,路径 上 会 出 现 许多 控制 点 。 单 击 控制 点 会 出 现 调整 手柄 (也 称 作 点 手柄 ) ,如 
图 5-18 所 示 。 拖 动 点 手柄 会 调整 路 径 的 曲率 。 


半径 1 半径 2 


调整 手柄 一 
\ 
选择 
选取 工具 一 角 入 一 “部 分 选取 "工具 l 
形 工 具 一 < 一 区 域 选 取 工具 
变形 工具 一遍 我 -一 区 域 选取 工具 fi 


图 5-17 “选择 ?工具 箱 图 5-18 “部 分 选取 ?工具 
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(3) 变形 工具 。 变 形 工具 中 包括 “缩放 * 工 具 “ 倾 余 " 工 具 和 "扭曲 * 工 具 , 可 以 对 矢量 图 
形 、 位 图 图形 进行 整体 的 缩放 、 倾 斜 和 扭曲 操作 。 在 CS 版 本 中 还 增加 了 切片 缩放 工具 ,用 
于 对 切片 的 调整 。 

(4) 区 域 选取 工具 。 区 域 选取 工具 中 包括 “裁剪 "工具 和 “导出 区 域 "工具 。“ 裁 前 "工具 
可 以 对 图 形 进 行 裁剪, 得 到 一 个 矩形 区 域 ;“ 导 出 区 域 " 工 具 则 是 选择 一 块 矩形 的 导出 区 域 ， 
配合 图 像 "导出 "操作 。 

2。 修 改 路 径 工具 

矢量 工具 箱 中 的 修改 路 径 工具 是 对 矢量 图 形 路 径 进 行 修改 的 工具 ,其 中 常用 的 是 “自由 
变形 "工具 和 “更 改 区 域 形状 "工具 。 

“自由 变形 "工具 有 两 种 状态 , 当 光标 移动 到 路 径 上 面 时 ,鼠标 图 标 旁边 出 现 一 个 “s”, 表 

a 示 为 拉 伸 状 态 ; 当 光标 不 在 路 径 上 面 时 ,和 鼠标 图 标 旁边 出 现 一 

六 形 记 的 直 笃 为 100p 蜂 。。。 表示 为 推动 状态 。 在 拉 伸 状态 时 , 拖 动 鼠标 可 以 拉动 路 

径 改变 形状 ; 在 推动 状态 时 , 拖 动 鼠标 可 以 使 用 一 个 贺 形 推动 
路 径 改 变形 状 。 拉 动 路 径 的 宽度 和 推动 圆 的 直径 由 自由 变形 
“属性 "面板 的 * 大 小 "确定 。 拉 伸 与 推动 的 效果 如 图 5 .19 所 示 。 

注意 ; 有 些 矢量 图 形 不 能 使 用 修改 路 径 工具 编辑 时 ,可 以 

图 5-19 ” 拉 伸 与 推动 的 效果 选中 该 图 形 , 在 “修改 ”菜单 中 选择 “取消 组 合 ” 后 ,就 可 以 使 用 
修改 路 径 工具 编辑 了 。 

“更 改 区 域 形状 * 工 具 的 形状 为 两 个 同心 圆 , 拖 动 两 个 同心 圆 改变 矢量 路 径 的 形状 ， 其 
中 外 加 表示 拖 动 区 域 宽度 ,由 “更 改 区 域 形状 "工具 “属性 "面板 的 * 大 小 ”确定 ; 内 贺 表 示 强 
度 , 由 “更 改 区 域 形状 "工具 “属性 "面板 的 “强度 "确定 。 图 5-20 是 使 用 * 更 改 区 域 形状 "工具 
对 一 个 矢量 矩形 区 域 的 更 改 效果 ,其 中 * 属 性 "面板 的 * 大 小 "为 60px,“ 强 度 "分别 为 15px、 
30px、45px 和 60px。 

3.“ 刀 子 ” 工 具 

矢量 工具 箱 中 的 “刀子 * 工 具 是 对 矢量 图 形 路 径 进行 切割 的 工具 ,可 以 把 一 个 矢量 图 形 
切 制 开 。 图 5.21 是 使 用 “刀子 "工具 切 开 的 加 形 矢量 图 形 。 


大 小 为 100px 的 
拉 伸 效果 


图 5-20 “更 改 区 域 形状 "工具 使 用 效果 图 5-21 使 用 “刀子 ?工具 切 开 的 圆 形 


注意 : 使 用 "刀子 "工具 切割 图 形 需要 划 两 刀 。 

4. 路 径 运算 

在 “修改 "| “组合 路 径 ? 菜 单 中 有 6 种 路 径 运 算 操作 : 接合 、 拆 分 .联合 交集. 打 孔 和 裁 
剪 。 其 中 "接合 ? 是 对 多 个 路 径 的 接合 ;“ 拆 分 ?是 接合 的 道 操作 。 在 两 个 矢量 图 形 运 算 时 ， 
“交集 ”和 “裁剪 "的 功能 是 一 样 的 。 图 5-22 是 原始 图 形 为 一 个 矩形 矢量 图 形 和 一 个 椭圆 矢 
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量 图 形 的 接合 、 联 合 ,交集 、 打 孔 运 算 的 结果 。 


和. 


原始 图 形 接合 联合 交集 打 孔 
5-22 接合, 联合、 交集、 打 孔 路 径 运 算 结 果 


5.4.4 文本 工具 


在 Fireworks 中 输入 文字 信息 使 用 矢量 工具 箱 的 “文本 ”工具 。 选 中 “文本 ”工具 后 ,在 
“文本 ”工具 属性 面板 ,可 以 设置 文字 字体 、 大 小 、 颜 色 、 对 齐 方式 等 属性 。 文 字 的 大 小 除了 可 
以 在 “文本 ”工具 属性 面板 中 使 用 “大 小 ”设置 之 外 ,还 可 以 使 用 “缩放 ”工具 对 文字 进行 任意 
缩放 操作 。 

虽然 “文本 ”工具 在 “矢量 "工具 箱 中 ,但 文字 是 字符 编码 信息 。 文 字 可 以 转换 为 失 量 图 
形 ,转换 后 ,文字 就 失去 了 编码 信息 ,只 是 普通 的 矢量 图 形 。 

文字 转换 为 矢量 图 形 的 操作 使 用 "文本 ”| 转换 为 路 径 ? 命 令 完成 。 如 果 被 转换 的 文字 
不 是 单个 文字 ,还 需要 使 用 “修改 ”1“ 取 消 组 合 "命令 ,文字 就 完全 变 成 了 各 自 独立 的 图 形 文 
字 。 对 于 转换 为 路 径 的 图 形 文字 可 以 像 矢量 图 形 一 样 任意 修改 。 

一 般 文 字 只 能 横 排 或 竖 排 显示 。 如 果 需 要 文字 按照 某 种 曲线 排列 ,可 以 使 用 将 文字 “ 附 
加 到 路 径 ” 的 操作 。 例 如 在 本 章 栏目 标题 栏 中 的 Logo 中 ,“China sun xiao ya” 是 沿 圆 弧 排 
列 的 ,可 以 使 用 文字 “附加 到 路 径 ?实现 。 注 意 文 字 “ 附 加 到 路 径 ” 中 的 路 径 不 能 是 闭合 路 径 。 
该 文字 “附加 到 路 径 ” 的 制作 方法 如 下 : 

(1) 使 用 “文本 ”工具 在 画布 中 输入 “China sun xiao ya”, 文 字 大 小 选择 20px。 

(2) 使 用 “椭圆 ”工具 在 画布 中 绘制 一 个 直径 为 90px, 无 填充 色 的 圆 形 ( 在 CS 版 本 中 需 
要 打开 “信息 ”面板 查看 图 形 大 小 信息 )。 

(3) 使 用 “刀子 ”工具 将 圆 形 路 径 切 除 下 面 一 段 圆 弧 并 删除 。 

(4) 按 住 Shift 键 ,选取 文字 和 剩 下 的 圆 弧 路 径 。 

(5) 选择 “文本 ”|“ 附 加 到 路 径 " 命 令 ,将 文本 附加 到 圆 弧 路 


- Ee ye oun ry 

径 上 。 如 果 文 字 位 置 不 理想 ,可 以 调整 “属性 ”面板 中 的 “文本 他 > 

偏 移 ” 量 ,但 是 如 果 在 CS 版 本 中 ,由 于 “属性 ”面板 中 没有 “ 文 。 , 态 © 

本 偏 移 " 量 调整 , 当 文 字 位 置 不 理想 时 只 能 修改 路 径 。 工 je 
(6) 文字 “附加 到 路 径 "后 , 圆 弧 路 径 将 不 再 显示 。 为 了 显 。 名 


示 文 字 下 面 的 圆 形 ,还 需要 再 绘制 一 个 圆 。 
文字 “附加 到 路 径 ” 的 结果 如 图 5-23 所 示 。 


5.4.5 矢量 图 形 填充 效果 


使 用 矢量 工具 中 的 几何 图 形 工 具 绘制 矢量 图 形 时 需要 选择 填充 色 。 填 充 色 选 择 可 以 在 
“颜色 ?工具 箱 或 在 “属性 ?面板 中 完成 “属性 ?面板 中 的 颜色 设置 及 “填充 类 别 ? 下 拉 列 表 内 
容 如 图 5-24 所 示 。 


图 5-23 文字 “附加 到 路 径 ” 
的 结果 
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EE 1. 透明 填充 
实心 当 *“ 填 充 类 别 ” 选 择 “ 无 "时 为 透明 填充 。 
ee - 2. 纯色 填充 
可， 在 “填充 类 别 为 “实心 "时 ,填充 色 为 纯色 填充 。 填 充 颜色 
| 可 以 从 “填充 色 ” 框 中 选择 ,也 可 以 在 “颜色 ”面板 “ 混 色 器 ”中 
实心 


选择 。 
图 5-24 颜色 设置 及 填充 类 别 3. 网 页 抖动 

在 使 用 非 Web 安全 色 填 充 时 ,可 以 选择 “网 页 拌 动 "。 使 
用 “网 页 拌 动 ”会 增加 图 像 的 字 节 尺寸 ,一 般 很 少 使 用 。 

4. 渐变 色 填 充 

在 “填充 类 别 ? 选 择 * 渐 变 ” 时 ,填充 色 为 渐变 色 填 充 。 使 用 渐变 色 填 充 时 可 以 从 弹出 菜 
单 中 选择 线性 ,放射 状 、 圆 锥 形 等 多 种 渐变 填充 效果 。 

(1) 编辑 渐变 色 。 单 击 “ 填 充 色 ”颜色 框 打 开 “ 编 辑 渐 变 ” 对 话 框 ,如 图 5-25 所 示 。 

在 “ 预 置 " 框 中 ,可 以 选择 系统 预 置 的 渐变 颜色 。 可 以 拉动 颜色 块 调整 颜色 的 位 置 ; 单 
击 颜 色 块 ,可 以 打开 颜色 样本 ,从 中 选择 颜色 ; 将 颜色 块 拉 出 颜色 区 域 可 以 删除 该 颜色 ; 鼠 
标 指向 颜色 块 所 在 区 域 时 ,鼠标 指针 旁 出 现 “ 十 "号, 单 击 会 增加 一 个 颜色 块 。 

“不 透明 度 ” 块 用 于 指示 该 区 域 的 不 透明 度 , 单 击 不 透明 度 块 可 以 弹出 一 个 “不 透明 度 ” 
编辑 窗口 ,用 于 设置 该 “不 透明 度 ” 块 的 不 透明 度 。 

(2) 填充 效果 调整 。 使 用 “颜色 ”工具 箱 中 “渐变 ”填充 工具 为 图 形 填 充 渐变 色 , 可 以 采 
用 “点 击 ” 和 "“ 拖 动 ” 两 种 填充 方式 。 根 据 * 点 击 ” 的 位 置 和 “ 拖 动 ”的 方向 ,可 以 得 到 不 同 的 浙 
变 填充 效果 。 

使 用 “指针 ”工具 选择 具有 渐变 填充 的 对 象 时 ,该 对 象 上 面 或 其 附近 会 出 现 一 组 手柄 ,如 
图 5-26 所 示 。 拖 动 这 些 手柄 可 以 移动 .旋转 、 倾 斜 和 更 改 对 象 的 渐变 填充 位 置 和 方向 。 


方形 手柄 
国 一 上 
圆 形 手柄 
图 5-25 “编辑 渐变 ”对话 框 图 5-26 渐变 填充 的 调整 手柄 


拖 动 圆 形 手柄 到 填充 内 的 一 个 新 位 置 ,可 以 在 对 象 内 移动 渐变 填充 位 置 ; 拖 动 连接 手 
柄 的 直线 ,可 以 旋转 填充 方向 ; 拖 动 方形 手柄 ,可 以 调整 填充 宽度 。 

5. 图 案 填充 

在 “填充 类 别 ? 选 择 图 案 填充 时 ,可 以 从 弹出 菜单 中 选择 很 多 种 图 案 填 充 效果 。 使 用 图 
案 填 充 和 渐变 填充 一 样 , 可 以 通过 调整 手柄 调整 填充 效果 。 所 不 同 的 是 ,图 案 填 充 的 调整 手 
柄 有 两 个 方形 手柄 ,分 别 调整 水 平和 垂直 方向 的 图 案 填 充 宽度 和 方向 , 圆 形 手柄 调整 填充 
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位 置 。 
可 以 使 用 任意 位 图 图 像 做 填充 图 案 。 在 图 案 填 充 弹 出 菜单 中 选择 “其 他 ”, 打 开 “ 定 位 文 


件 ” 对 话 框 ,从 中 选择 图 像 文件 并 打开 ,该 图 像 成 为 填充 图 案 。 


6. 填充 选项 
在 “颜色 ”工具 箱 的 “填充 色 ” 设 置 和 “填充 类 别 " 中 都 可 以 打开 “填充 选项 ”对 话 框 ,如 


图 5-27 所 示 。 


填充 类 别 渐变 列表 


预 置 填充 医 本 二 |- 编辑 填充 
边缘 效果 十 过 纺 [N 了 由 本 的 “ 寺 忆 化 总 量 
六 入 pw | 司 p% -一 纹理 总 最 
厂 泛 明 
| 
纹理 名 称 列表 


图 5-27 “填充 选项 ”对 话 框 
其 中 内 容 也 是 填充 类 别 选择 ,编辑 和 “边缘 ”“ 纹 理 ” 设 置 。 在 低 版 本 的 Fireworks* 属 
性 ?面板 中 也 可 以 设置 “纹理 ”; 在 CS 版 本 中 ,“ 纹 理 " 只 能 在 “填充 选项 ”中 设置 。 在 “边缘 ” 
设置 中 ,只 有 选择 “羽化 "时,“ 羽 化 总 量 ” 才 能 调整 羽化 边缘 的 宽度 。 
5.4.6 矢量 图 形 滤 镜 效果 
在 矢量 图 形 * 属 性 ?面板 中 使 用 * 添 加 动态 滤 镜 ”(CS 版 本 中 * 添 加 滤 镜 ”) 可 以 打开 滤 镜 


菜单 ,如 图 5-28 所 示 。 
对 于 矢量 图 形 以 及 文字 一 般 常 用 的 滤 镜 为 “ 斜 角 和 浮雕 "“ 阴 影 和 光 蜡 ”。 


1. 和 斜 角 和 浮雕 
斜 角 滤 镜 常用 于 按钮 ,文字 效果 的 制作 ,其 中 “内 斜 角 ” 滤 镜 设置 对 话 框 如 图 5-29 所 示 。 
滤 镜 菜单 = 
添加 动态 让 - 芭 一 一 
Ni 匀 角 边缘 形状 
话 镜 ， [4 - 条 点 ， 上 起 泽 陵 
模糊 » 了 
We, ， 伸 边 宽度 -上 5 一 所 一 二 一 对 比 度 
ne 本 P“ 引 一 巴 化 
2 于 一 引 一 角度 


阴 : 
编辑 并 排列 效果 Eye Candy 4000 IE 


Mien Skin Splat IE 上 


图 5-28 添加 动态 滤 镜 图 5-29 “内 斜 角 ? 滤 镜 设 置 对 话 杠 


预 设 按钮 -| 起 ” 


斜 角 边缘 形状 : 常用 “平坦 ”和 “平滑 ”两 种 。“ 平 坦 ” 为 45 斜面 ;“ 平 滑 ? 为 没有 楼 线 的 
圆 弧 斜面 。 
斜 边 宽度 : 可 以 调整 斜 边 的 宽度 。 
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预 设 按 钮 : 可 以 选择 斜 角 的 形状 ,一般 常 用 * 凸 起 ”。 

对 比 度 : 斜 边 和 平面 的 对 比 度 。 数 值 越 大 ,立体 效果 越 强 。 

柔 化 : 斜 边 的 柔 化 宽度 。 

角度 : 入射 光线 角度 。 

2. 阴影 和 光 晕 

阴影 和 光量 滤 镜 用 于 制作 投影 和 发 光 效 果 的 图 像 效 果 。 

(1) 投影 “投影 ? 滤 镜 设置 对 话 框 如 图 5-30 所 示 ,其 中 图 5-30(b) 是 投影 距离 为 15px 
的 字母 投影 效果 。 


nn Ets 
投影 色 -上 上 国 。 才 下 | 隶 化 A 
区 sl15 下 角度 
厂 者 底 色 


(a) (b) 
5-30 “投影 ” 滤 镜 设置 对 话 框 


“不 透明 度 ” 是 投影 的 不 透明 度 , 角 度 为 投影 角度 。 选 中 “去 底 色 ” 复 选 框 时 ,只 有 投影 显示 。 
(2) 发 光 。“ 发 光 ” 滤 镜 设置 对 话 框 如 图 5-31 所 示 ,其 中 图 5-31(b) 是 图 5-31(a) 设 置 的 


发 光 宽度 一 4ho ”下 ” 回 % ”下 | 一 不 透明 度 
发 光 色 于 加 | J 
WE。 回 [一 光 东 偏离 


(a) (b) 
5-31 “发 光 ” 滤 镜 设置 对 话 框 


5.5 位 图 图 像 编 辑 


5.5.1 位 图 工具 


在 Fireworks 中 打开 或 导入 的 GIF JPEG 图 像 文件 都 是 位 图 图 像 。 位 图 图 像 需 要 使 
位 图 工具 编辑 。 编 辑 位 图 图 像 需要 使 用 * 位 图 ”工具 箱 中 的 工具 ,选择 ?工具 箱 中 的 变形 工 
有 具 也 可 以 对 位 图 图 像 进行 缩放 ,倾斜 .扭曲 ,可 以 使 用 “区 域 选择 ”工具 对 图 像 进行 裁剪 ,设置 
导出 区 域 。 

位 图 图 像 不 能 使 用 矢量 工具 编辑 ,同样 矢量 图 像 也 不 能 使 用 位 图 工具 编辑 。 

1.“ 位 图 "工具 箱 


“位 图 ?工具 箱 如 图 5-32 所 示 ,其 中 包括 4 类 工具 : 位 图 
绘图 工具 、 氛 除 工具 、 区 域 选 择 工 具 和 位 图 修饰 工具 。 ”位 图 选取 工具 一 如 全 | 一 套 索 工具 
2、 位 图 绘图 工具 “魔术 棒 " 工 具 一 人 SN 到 一 “刷子 "工具 


"“ 负 笔 工具 一 多 现 | 橡 皮 擦 "工具 
位 图 绘图 工具 包括 “铅笔 工具 和 “刷子 ”工具 。 照片 修正 工具 一 加 [< | 一 对 象 编辑 工具 


“铅笔 ”工具 只 能 绘制 1px 的 线条 ,一 般 只 用 于 勾画 ee 
草图 。 图 5-32 “位 图 ”工具 箱 
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“刷子 ?工具 是 一 个 包含 各 种 笔触 效果 的 绘图 工具 。 

“刷子 工具 除了 可 以 选择 笔触 颜色 .笔尖 大 小 之 外 ,还 有 如 下 3 种 。 

(1) 描 边 种 类 : 选择 多 种 笔触 效果 。 

(2) 边缘 柔 化 : 设置 笔触 边缘 的 柔 化 范围 。 

(3) 纹理 : 可 以 选择 多 种 笔触 纹理 效果 。 

3.“ 橡 皮 擦 "工具 

“橡皮 擦 ” 工 具 用 于 擦 除 位 图 图 像 。 在 “橡皮 擦 ”工具 “属性 ”面板 中 ,可 以 设置 橡皮 擦 的 
“大 小 ”“ 形 状 ”( 和 矩形 、 圆 形 )。 如 果 需 要 边缘 柔 化 ,还 可 以 设置 其 “边缘 ”的 柔 化 大 小 。 

4. 位 图 区 域 选择 工具 

在 对 位 图 进行 颜色 填充 、 区 域 复制 移动 .删除 等 操作 时 ,首先 需要 选择 区 域 。 位 图 图 像 
区 域 选 择 工具 有 如 下 几 种 。 

(1)“ 选 取 框 工具 和 “椭圆 选取 框 工 具 。 用 于 选取 位 图 图 像 上 的 一 个 矩形 或 椭圆 形 的 
区 域 。 
(2)“ 套 索 ” 工 具 和 “多 边 形 套 索 ”工具 。“ 套 索 ” 工 具 使 用 曲线 围 成 一 个 选取 区 域 ;“ 多 
边 形 套 索 ?工具 使 用 多 段 直线 围 成 一 个 选取 区 域 。 

(3)“ 魔 术 棒 ?工具 。“ 魔 术 棒 ?工具 用 于 选择 颜色 相似 的 像素 区 域 。 通 过 在 “属性 ?面板 
中 调整 “魔术 棒 ” 的 “ 容 差 "和 “边缘 ”选项 ,可 以 控制 “魔术 棒 ” 选 择 像素 的 方式 。 

“ 容 差 表示 颜色 的 范围 ,0 表示 完全 相同 的 颜色 。“ 羽 化 ”可 以 设置 柔 化 像素 选取 的 边 
缘 宽 度 。 

(4) 对 选取 区 域 的 操作 。 

@ 移动 选取 区 域 : 按 住 Ctrl 键 , 使 用 鼠标 拖 动 区 域 。 

@ 复制 选取 区 域 : 按 住 Ctrl 十 Alt 键 , 使 用 鼠标 拖 动 区 域 。 

@ 删除 选取 区 域 : Delete 键 。 

@ 取消 选取 区 域 : Esc 键 。 

@ 附加 选取 区 域 : 按 住 Shift 键 ,再 选择 新 的 选取 区 域 。 

@ 减 去 选取 区 域 : 按 住 Alt 键 ,再 选择 去 除 的 选取 区 域 。 

5. 位 图 修饰 工具 

Fireworks 位 图 修饰 工具 有 如 下 几 种 。 

(1)“ 橡 皮 图 章 ? 工 具 。“ 橡 皮 图 章 ? 工 具 可 以 克隆 位 图 图 像 的 部 分 区 域 , 可 以 将 其 复制 
到 图 像 中 的 其 他 区 域 。“ 橡 皮 图 章 ” 工 具 的 使 用 方法 如 下 : 

Q@ 选择 “橡皮 图 章 ” 工 具 。 

@ 单 击 某 一 区 域 将 其 指定 为 源 ( 即 要 克隆 的 区 域 ) ,取样 指针 即 会 变 成 十 字形 指针 。 要 
指定 另 一 个 要 克隆 的 像素 区 域 ,可 以 按 住 Alt 键 并 单 击 另 一 个 像素 区 域 ,将 其 指定 为 源 。 

@ 移动 光标 指针 到 图 像 的 其 他 部 分 ,可 以 看 到 两 个 指针 。 第 一 个 指针 是 克隆 源 ,为 十 
字形 ; 第 二 个 指针 是 蓝 色 圆圈 形状 。 拖 动 第 二 个 指针 时 ,第 一 个 指针 下 的 像素 会 复制 到 第 
二 个 指针 下 的 区 域 。 

四“ 属性 ?面板 中 的 “大 小 ?可 以 设置 克隆 区 域 的 大 小 。 

@ 按 住 Alt 键 ,可 以 重新 选择 克隆 源 。 

(2)“ 替 换 颜色 ”工具 。 用 一 种 颜色 替换 另 一 种 颜色 。 
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(3)“ 红 眼 消 除 ” 工 具 。 矫 正 照 片 红眼 效应 。 仅 对 照片 的 红色 区 域 用 灰色 和 黑色 替换 。 
(4)“ 模 糊 ” 工 具 。 减 弱 图 像 中 所 选区 域 的 清晰 度 。 

(5)“ 锐 化 ”工具 。 锐 化 图 像 中 的 区 域 。 

(6)“ 减 淡 ? 工 具 。 加 亮 图 像 中 的 部 分 区 域 。 

(7) “加深 ?工具 。 加 深 图 像 中 的 部 分 区 域 。 

(8) “涂抹 ?工具 。 拾 取 颜 色 并 在 图 像 中 沿 拖 动 的 方向 推移 该 颜色 。 


5.5.2 位 图 滤 镜 效果 


编辑 位 图 时 经 常 需要 使 用 滤 镜 达到 某 种 预期 的 效果 。Photoshop 中 的 滤 镜 种 类 较 多 ， 
在 Fireworks 中 编辑 位 图 常用 的 滤 镜 有 调整 颜色 ,模糊 和 锐 化 滤 镜 , 锐 化 滤 镜 主要 是 增加 选 
区 图 像 的 对 比 度 ,模糊 滤 镜 主要 提供 几 种 模糊 效果 ,最 复杂 的 是 调整 颜色 滤 镜 ,其 中 包含 多 


种 调整 方法 。 

1. 调整 颜色 滤 镜 

(1) 亮度 /对 比 度 调 整 。 调 整 图 像 的 亮度 即 改变 图 像 的 曝光 量 。 对 比 度 是 颜色 的 清 
晰 度 。 


(2) 反 转 。 颜 色 反 转 是 将 颜色 RGB 值 取 反 ,得 到 照片 底片 的 效果 。 

(3) 色 阶 。 色 阶 是 图 形 中 颜色 的 数目 。“ 色 阶 ” 对 话 框 如 图 5-33 所 示 。 对 话 框 的 直方 图 
中 是 图 像 中 的 颜色 分 布 。 颜 色 分 布 从 纯 黑 到 纯 白色 用 0 一 255 数值 表示 。 调 整 “ 设 置 输入 级 
别 ” 的 “ 纯 黑色 ” 滑 块 ,可 以 改变 “输入 色 阶 ”的 最 小 强度 值 。 当 最 小 强度 值 变 大 后 ,表示 从 0 
到 这 一 数值 的 颜色 都 用 黑色 表示 ,这 时 图 像 的 亮度 将 降低 ,同时 也 减少 了 颜色 数 。 同 理 , 调 
整 “设置 输入 级 别 "的 * 纯 白色 ” 滑 块 ,可 以 改变 “输入 色 阶 ” 的 最 大 强度 值 。 当 最 大 强度 值 变 
小 后 ,表示 从 这 一 数值 的 颜色 到 255 的 颜色 都 用 白色 表示 ,这 时 图 像 的 亮度 将 增 大 ,同时 也 


减少 了 颜色 数 。 
最 小 强度 灰 度 系数 最 大 强度 
划 
通道 RGB 
wanop El CE 
图 像 中 的 Bb 
颜色 分 布 
订 预 WP) 

设置 输入 级 别 < 2 之 
纯 黑 色 Mento ps 
设置 输出 级 别 一 


上 
灰 度 系数 (中 间 色 调 ) 最 小 强度 最 大 强度 。 纯 白 色 
图 5-33 “ 色 阶 ”对 话 框 


输入 色 阶 是 从 原 图 像 中 获取 的 色 阶 , 输 出 色 阶 是 导出 图 像 使 用 的 色 阶 。 调 整 “设置 输出 
级 别 ” 的 “ 纯 黑色 ” 滑 块 ,可 以 改变 “输出 色 阶 ”的 最 小 强度 值 。 当 最 小 强度 值 变 大 后 ,表示 图 
像 中 最 暗 的 颜色 使 用 该 强度 表示 ,相当 于 增加 了 图 像 的 亮度 。 同 理 , 调 整 “设置 输出 级 别 ” 的 
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“ 纯 白 色 ” 滑 块 ,可 以 改变 “输出 色 阶 ” 的 最 大 强度 值 。 当 最 大 强度 值 变 小 后 ,表示 图 像 中 最 亮 
的 颜色 使 用 该 强度 表示 ,相当 于 降低 了 图 像 的 亮度 。 

灰 度 系数 代表 了 中 间 色 调 在 暗色 和 亮色 之 间 的 分 布 比例 ,一 般 取 值 为 1。 如 果 往 暗 调 
区 域 移动 灰 度 调整 滑 块 ,图 像 将 变 亮 。 因 为 暗色 到 中 间 色 调 的 距离 比 中 间 色 调 到 亮色 的 距 
离 短 ,表示 中 间 色 调 偏向 亮色 区 域 更 多 一 些 ,因此 图 像 变 亮 了 ; 反之 ,图 像 将 变 暗 。 

(4) 色相 /饱和 度 。 色 相 即 颜色 的 相貌 ,调整 色相 就 是 调整 颜色 。 颜 色 的 饱和 程度 称 作 
饱和 度 。“ 色 相 / 饱 和 度 ” 对 话 框 如 图 5-34 所 示 , 调 整 其 中 的 “色相 ”指针 可 以 调整 图 像 中 的 
颜色 ; 调整 “饱和 度 ” 指 针 可 以 调整 图 像 中 颜色 的 饱和 度 。 


BI 
a FC | 


5-34 “色相 /饱和 度 ” 对 话 框 


(5) 曲线 。 曲 线 滤 镜 功能 同色 阶 功能 相似 ,是 以 调整 曲线 的 方式 调整 图 像 的 高 亮 、 暗 色 
和 中 间 色 。 

2. 模糊 滤 镜 

模糊 滤 镜 可 以 制作 图 像 的 多 种 模糊 效果 。 图 5-35 是 常用 的 放射 状 模糊 、 运 动 模糊 、 缩 
放 模糊 和 高 斯 模糊 的 效果 。 其 中 “放射 状 模糊 ”和 “缩放 模糊 ”的 模糊 设置 对 话 框 中 可 以 设置 
“模糊 总 量 " 和 “模糊 品质 ”;“ 运 动 模糊 ”的 模糊 设置 对 话 框 中 可 以 设置 “模糊 角度 ”和 “模糊 
距离 >;“ 高 斯 模糊 ”的 模糊 设置 对 话 框 中 可 以 设置 “模糊 范围 *。 通 过 不 同 的 参数 设置 可 以 
实现 不 同 的 模糊 效果 。 


(a) 放射 状 模糊 (b) 运动 模糊 


(©) 缩放 模糊 (d) 高 斯 模糊 
图 5-35 各 种 模糊 滤 镜 效果 
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5.5.3 图像 蒙 版 效果 


在 Fireworks 中 , 蒙 版 是 一 种 图 像 显 示 效 果 。 图 像 通过 蒙 版 遮挡 ,形成 部 分 图 像 显示 或 
半 透 明 效果 显示 。 

1. 矢量 蒙 版 

矢量 蒙 版 是 利用 矢量 图 形 作为 蒙 版 制作 的 蒙 版 图 像 效 果 。 矢 量 图 形 、 文 字 都 可 以 制作 
矢量 蒙 版 。 

矢量 蒙 版 的 制作 方法 如 下 : 

(1) 打开 位 图 图 片 。 

(2) 在 "矢量 ?工具 箱 中 选择 一 个 需要 的 矢量 图 形 (或 文字 ) 工 
具 , 在 位 图 图 片 中 需要 显露 的 位 置 绘制 一 个 矢量 图 形 ,图 形 的 填充 
色 不 能 使 用 透明 色 。 

(3) 选中 矢量 图 形 , 使 用 Ctrl 十 X 组 合 键 剪 切 图 形 。 

(4) 选中 位 图 图 片 ,在 菜单 栏 选择 “编辑 ”|“ 粘 贴 为 蒙 版 ”命令 。 

图 5-36 是 使 用 椭圆 图 形制 作 的 矢量 蒙 版 。 

2. 位 图 蒙 版 

位 图 蒙 版 是 在 位 图 图 像 上 添加 一 个 位 图 蒙 版 ,通过 修改 蒙 版 的 

图 5-36 矢量 蒙 版 ”填充 色 来 确定 如 何 显示 。 蒙 版 的 填充 色 如 果 是 黑色 , 则 被 添加 蒙 版 

的 图 像 不 显示 (显示 为 透明 色 ); 蒙 版 的 填充 色 如 果 是 白色 , 则 显示 
被 添加 蒙 版 的 图 像 ; 蒙 版 的 填充 色 如 果 是 灰色 或 透明 度 不 是 100% 时 ,被 添加 蒙 版 的 图 像 显 
示 为 半 透 明 。 

位 图 蒙 版 制作 方法 如 下 : 

(1) 打开 位 图 图 片 。 

(2) 在 如 图 5-37 所 示 的 图 层面 板 中 使 用 “添加 蒙 版 ”为 位 图 图 片 添 加 一 个 位 图 蒙 版 。 

(3) 保 持 “ 属 性 ”面板 中 “ 灰 度 等 级 " 单 选 按 钮 被 选中 ,选择 “渐变 填充 "工具, 在“ 属性” 面 
板 中 选择 填充 类 型 ,使 用 “渐变 填充 ”工具 在 图 片上 点 击 或 拖 搜 ,制作 出 渐变 半 透 明 效 果 的 蒙 
版 图 像 。 图 5-38(a) 是 使 用 线性 填充 蒙 版 的 位 图 蒙 版 效果 ; 图 5-38(b) 是 使 用 椭圆 形 渐变 填 
充 蒙 版 的 位 图 蒙 版 效果 。 

使 用 位 图 “刷子 ”工具 给 蒙 版 着 色 , 也 可 以 制作 位 图 蒙 版 效果 。 当 刷子 颜色 使 用 黑色 时 ， 
被 涂抹 的 部 分 显示 透明 色 ; 当 刷 子 颜色 使 用 白色 时 ,被 涂抹 的 部 分 (或 不 涂抹 的 部 分 ) 显 示 
原来 的 图 像 ; 当 刷子 颜色 使 用 不 同 的 灰色 或 刷子 颜色 不 透明 度 不 是 100%% 时 ,被 涂抹 的 部 分 
图 像 半 透明 显示 。 图 5-38(c) 是 使 用 灰色 涂抹 位 图 蒙 版 四 周 的 效果 。 

如 果 和 希望 图 像 的 透明 、 半 透明 部 分 显示 其 他 颜色 ,可 以 在 图 片 之 上 添加 一 个 色 块 ,然后 
给 色 块 添加 蒙 版 ,再 通过 给 蒙 版 填充 颜色 达到 预期 的 显示 效果 。 例 如 使 用 "矩形 ?工具 在 图 
片上 面 绘制 一 个 绿色 矩形 ,在 “ 层 " 面 板 中 为 矩形 添加 蒙 版 。 

使 用 “刷子 ”工具 涂抹 蒙 版 ,如 果 刷 子 颜色 使 用 黑色 时 ,绿色 矩形 上 对 应 被 涂抹 部 分 应 该 
透明 显示 , 即 显示 下 面 的 图 像 ; 如 果 刷 子 颜色 使 用 灰色 或 选择 不 同 的 不 透明 度 ,绿色 矩形 上 
对 应 被 涂抹 部 分 应 该 半 透 明显 示 , 下 面 的 图 像 上 像 被 蒙 上 了 一 层 绿 纱 。 图 5-38(d) 是 如 上 
制作 的 结果 ,其 中 花 条 四 周 是 使 用 不 同 透明 度 的 黑色 涂抹 形成 的 。 
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殴 Hacromedia Fireworks 8 - [f143.jpg 会 100% (位 图 蒙 瞩 )#] 
文件 到 ) 蝙 辑 下 ) 视图 WW) 选择 忆 ) 修改 介 文本 江 ) 命令 人 C) 活 镜 中 窗口 各 帮助 中 
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图 5-37 添加 位 图 蒙 版 


(©) 使 用 灰色 涂抹 位 图 蒙 版 四 周 (d) 添加 色 块 后 的 蒙 版 涂抹 效果 


图 5-38 位 图 蒙 版 
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3. 使 用 位 图 蒙 版 制作 网 站 标题 
图 5-39 是 中 华人 民 共 和 国 中 央 人 民政 府 网 站 的 标题 栏 。 背 景 图 片上 有 天 安 门 . 国 微 和 
深 红色 线性 半 透 明 填 充 的 矩形 。 


中 华人 民 共 和 国 中 央 人 民政 府 一 


The Central People's Government of the People's Republic of China 


5-39 ”中 华人 民 共和 国 中 央 人 民政 府 网 站 标题 栏 


该 标题 栏 制作 方法 如 下 : 

(1) 准备 天 安 门 城楼 图 片 和 国 微 图 案 (国徽 图 案 背 景色 需要 使 用 透明 色 )。 

(2) 新 建 Fireworks 文档 ,画布 大 小 为 Banner 设计 的 大 小 。 将 天 安 门 城楼 图 片 导入 ， 
缩放 成 需要 的 大 小 。 

(3) 在 画布 上 绘制 一 个 矩形 ,颜色 按 需 要 选择 。 

(4) 在 * 层 ?面板 中 为 矩形 添加 蒙 版 。 

(5) 选择 “渐变 填充 "工具 填充 类 型 为 “线性 ”, 用 “渐变 填充 ”工具 在 蒙 版 上 拖 动 ,形成 所 
需 的 半 透 明 效 果 图 像 (注意 调整 填充 色 块 的 位 置 ,用 于 满足 显示 区 域 的 需要 ) 。 

(6) 导入 国徽 图 案 , 调 整 大 小 和 位 置 ,导出 图 像 。 


5.6 “作品 欣赏 "页面 制作 


本 任务 要 求 完成 本 栏目 中 “作品 欣赏 "页 面 prac5-1. html 的 制作 。 

“作品 欣赏 ”页面 结构 比较 简单 ,为 一 个 简单 的 表格 结构 。 按 照 设计 要 求 , 本 页 面 中 包括 
以 下 7 个 作品 。 

标题 栏 GIF 逐 帧 动画 : prac5-1. gif; 

矢量 图 形 编辑 : prac5-2. jpg; 

位 图 图 像 编辑 : prac5-3. jpg; 

位 图 蒙 版 : prac5-4. jpg; 

透明 度 变 化 GIF 选择 动画 : prac5-5. gif; 

位 置 变化 GIF 选择 动画 : prac5-6. gif; 

分 散 到 帧 GIF 动画 : prac5-7. gif。 


5.6.1 矢量 图 形 编辑 图 片 制作 


按照 设计 要 求 , 矢 量 图 形 编辑 图 片 prac5-2. jpg 中 包含 3 个 图 形 : 一 个 使 用 图 像 填充 和 
变形 的 “ 花 ? 字 图 形 ; 一 个 是 带 阴影 的 花 球 图 形 ; 一 个 是 贴图 笔 简 图 形 。 制 作 方 法 如 下 。 

1.“ 花 ? 字 图 形制 作 

(1) 新 建 Fireworks 文档 ,画布 大 小 选择 320X240px。 保 存 图 像 到 本 地 站 点 images 目 
录 中 ,文件 名 使 用 prac5-2. png。 

(2) 使 用 文本 工具 在 画布 左上 和 角 书写 一 个 “ 花 ” 字 ,大 小 60px, 隶 书 字体 。 选 择 “ 花 ” 字 ， 
使 用 “文本 ”|“ 转 换 为 路 径 ” 命 令 将 其 转换 为 矢量 图 形 。 
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(3) 使 用 矢量 工具 箱 中 的 “更 改 区 域 形 状 ”工具 (大 小 、 强 度 都 选择 40) ,对 “ 花 ” 字 图 形 进 
行 拖 搜 ,修改 图 形 形 状 。 

(4) 使 用 “指针 ”工具 选择 “ 花 ” 字 图 形 , 在 “属性 ”面板 中 选择 填充 类 型 为 “图 案 ”, 在 图 案 
列表 中 选择 “其 他 ”, 打开“ 定位 文件 ”对 话 框 ,通过 浏览 选择 本 地 站 点 images 目录 中 的 
tp4-4.jpg。 

(5) 使 用 “指针 ”工具 选择 “ 花 ” 字 图 形 ,调整 填 充 位 置 ,达到 满意 效果 为 止 。 保 存 文档 。 

2. 花 球 图 形制 作 

(1) 在 prac5-2. png 文档 中 锁定 “ 花 ” 字 图 形 所 在 图 层 。 新 建 图 层 , 并 命名 新 建 图 层 名 称 
为 “ 花 球 ”。 

(2) 在 “ 花 球 ” 图 层 中 绘制 一 个 100 X100px 的 正 圆 ,选择 “图 案 " 填 充 , 填 充 图 案 使 用 
images\tp4-3. jpg。 调 整 填充 位 置 , 达 到 满意 效果 为 止 。 

(3) 再 绘制 一 个 100X100px 的 正 圆 , 选 择 * 渐 变 ”|* 放 射 状 "黑白 填充 ,白色 在 中 间 形 成 
高 光 球 形 效果 。 调 整 填充 效果 ,使 高 光 部 位 在 球体 左上 方 。 

(4) 将 两 个 正 圆 对 齐 ,在 图 5-40 所 示 的 “属性 ”面板 的 “混合 模式 ”属性 中 选择 “ 强 光 ”， 
“不 透明 度 ” 选 择 80%。 


< 
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5-40 “混合 模式 ”属性 设置 
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(5) 在 球体 右 下 方 绘制 一 个 50X25px 黑色 填充 的 椭圆 ,在 “属性 ”面板 设置 其 “边缘 ” 属 
性 为 “羽化 ”,“ 羽 化 总 量 ” 使 用 默认 值 (10),“ 不 透明 度 ” 选 择 80% 。 

(6) 保存 文档 ,锁定 “ 花 球 ” 图 层 。 

3. 贴图 笔 简 图 形制 作 

(1) 在 Fireworks 中 打开 贴图 图 片 images\tp5-1. jpg。 

(2) 新 建 图 层 , 在 新 建 图 层 中 使 用 矢量 “矩形 ?工具 绘制 一 个 80X130px 的 矩形 (无 笔触 
色 , 填 充实 心 黑色 ) 放 置 到 图 片 适当 的 位 置 ; 再 使 用 矢量 “椭圆 "工具 绘制 两 个 80 X30px 椭 
圆 形 (无 笔触 色 ,填充 实心 黑色 ) ,分 别 放置 在 矩形 的 上 面 和 下 面 ,椭圆 横 轴 与 矩形 横 边 对 齐 。 

(3) 选中 层 中 所 有 图 形 ,选择 “修改 "|“ 对 齐 ”|* 左 对 齐 ” 命 令 , 再 选择 "修改 "|* 组 合 ” 命 
令 , 将 3 个 图 形 组 合成 圆柱 体 。 调 整 圆柱 体 与 贴图 图 片 的 相对 位 置 。 

(4) 选中 圆柱 体 ,使 用 Ctrl 十 X 键 剪 切 圆柱 体 图 形 ; 选中 “背景 "图 层 中 的 贴图 图 片 ,使 
用 “编辑 ”|“ 粘 贴 为 蒙 版 ”命令 完成 矢量 蒙 版 制作 。 

(5) 使 用 矢量 “椭圆 ”工具 绘制 一 个 无 笔触 色 、 黑 白 渐变 填充 、80 X 30px 的 椭圆 置 于 贺 
柱 项 部 。 

(6) 使 用 矢量 “椭圆 "工具 再 绘制 一 个 无 笔触 色 、 黑 白 渐 变 填 充 、60 X15px 的 椭圆 放置 
在 前 一 个 椭圆 上 面 ,使 其 中 心 重 到 。 调 整 填充 方向 与 前 一 个 椭圆 的 填充 方向 相反 ,形成 立体 
管 形 效果 。 
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(7) 选中 画布 的 透明 部 分 ,在 “属性 ”面板 中 单 击 “ 符 合 画 布 ”, 去 除 画布 多 余部 分 。 选 中 
所 有 图 形 , 选 择 “ 修 改 ”1“ 组 合 ”, 将 图 形 组 合 在 一 起 ,完成 贴图 笔 简 制 作 。 

(8) 选中 贴图 笔 简 图 形 , 复 制图 形 。 从 窗口 中 选择 prac5-2. png 文档 ,粘贴 图 形 ,调整 图 
形 位 置 。 

(9) 导出 图 片 prac5-2. jpg。 


5.6.2 位 图 图 像 编 辑 图 片 制作 


位 图 图 像 编辑 图 片 prac5-3. jpg 是 利用 素材 图 片 images\tp5-3. jpg ,复制 其 中 的 人 物 图 
像 制 作 的 。 复 制 人 物 可 以 采用 复制 .粘贴 选区 的 方法 实现 ,也 可 以 通过 克隆 图 像 的 方法 实 
现 。 在 Photoshop 中 选区 选取 工具 比较 丰富 ,功能 较 强 ,例如 “智能 选择 工具 ”“ 快 速 选 择 工 
具 ” 以 及 “磁性 套 索 工具 ”等 ,容易 实现 将 人 物 图 像 制作 成 选区 。 但 在 Fireworks 中 选取 工具 
功能 较 差 , 不 容易 将 人 物 图 像 制作 成 选区 ,所 以 这 里 使 用 克隆 图 像 方 法 制作 ,其 制作 方法 
如 下 : 

(1) 在 Fireworks 中 打开 图 片 images\tp5-3. jpg, 修 改 图 像 大 小 为 320 X240px。 

(2) 在 “位 图 ”工具 箱 中 选择 “橡皮 图 章 ” 工 具 ,调整 工具 的 大 小 。 

(3) 将 人 物 图 像 复 制 到 指定 位 置 。 

(4) 导出 图 片 prac5-3. jpg。 


5.6.3 位 图 蒙 版 图 片 制作 


位 图 蒙 版 图 片 prac5-4. jpg 是 利用 素材 图 片 images\tp5-4. jpg 添加 位 图 蒙 版 制作 的 。 
制作 方法 如 下 : 

(1) 在 Fireworks 中 打开 图 片 images\tp5-4. jpg, 修 改 图 像 大 小 为 320 X240px。 

(2) 新 建 图 层 , 使 用 “矩形 "工具 绘制 一 个 320X240px、 填 充 颜 色 为 # BD9CFF 的 矩形 覆 
盖 住 图 片 。 选 中 绘制 的 矩形 ,在 “层面 板 中 添加 * 蒙 版 ”。 

(3) 选择 “刷子 ”工具 ,“ 描 边 种 类 ”选择 “毛笔 ”1“ 纹 带 ”, 颜 色 使 用 “黑色 ”, 在 蒙 版 中 部 涂 
抹 , 擦 出 人 物 图 像 ; 调整 “不 透明 度 ” 为 33% ,涂抹 蒙 版 其 余部 分 , 擦 出 半 透 明 效 果 。 

(4) 导出 图 片 prac5-4. jpg。 


5.6.4 GIF 动画 


GIF 动画 是 由 多 帧 图 像 构成 的 动画 。 在 Fireworks 中 制作 GIF 动画 非常 简单 。 

1.“ 帧 面板 

动画 是 由 多 帧 图 像 构 成 的 ,使 用 “ 帧 "面板 可 以 看 到 每 个 帧 的 内 容 。“ 帧 "面板 是 创建 和 
组 织 帧 的 地 方 ,可 以 完成 命名 帧 ,添加 帧 ,手动 设置 动画 的 延 时 以 及 将 对 象 从 一 个 帧 移动 到 
另 一 个 帧 等 操作 。Fireworks 的 “ 帧 "面板 如 图 5-41 所 示 (CS 版 本 中 为 “状态 ”面板 )。 

帧 列表 窗口 中 是 当前 建立 的 帧 列表 。 选 中 的 帧 可 以 显示 在 画布 中 进行 编辑 。 在 动画 
中 ,图 像 的 先后 出 现 顺序 是 由 帧 列表 顺序 确定 的 ,可 以 拖 动 帧 的 位 置 改 变 排列 顺序 。 在 画布 
中 选中 对 象 后 ,“ 帧 "面板 中 显示 帧 内 对 象 图 标 , 拖 动 该 图 标 到 其 他 帧 可 以 将 该 对 象 移动 到 其 
他 帧 。 如 果 需 要 复制 该 对 象 , 可 以 在 拖 动 时 按 住 Alt 键 。 

“ 帧 延 时 ”是 该 帧 图 像 在 播放 时 停留 的 时 间 (s/100) .双击 一 个 帧 的 “ 帧 延 时 ?可 以 打开 
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选项 菜单 


可 见 帧 范围 一 状 国 本 7 帧 延 时 100 


分 散 到 帧 
新 建 / 重 置 帧 


永久 硬 回 亩 一 删除 帧 
图 5-41 “ 帧 "面板 


GIF 动画 循环 


“ 帧 延 时 ”设置 对 话 框 ,如 图 5-42 所 示 。 在 该 对 话 框 中 可 以 修改 该 帧 的 延 时 。 如 果 同 时 修改 
多 帧 的 延 时 ,可 以 同时 选中 多 帧 ,打开 * 帧 延 时 ?设置 对 话 框 进行 设置 。 


单 击 “新 建 / 重 置 帧 ”按钮 可 以 新 建 一 帧 ,将 一 个 帧 i 
拖 动 到 “新 建 / 重 置 帧 "按钮 上 ,可 以 复制 这 个 帧 。 iio 

使 用 “洋葱 皮 ”可 以 查看 当前 所 选 帧 之 前 和 之 后 的 ES 
帧 的 内 容 。 可 以 很 流畅 地 使 对 象 变 为 动画 ,而 不 用 在 帧 。 图 5-42 “ 帧 延 时 ”设置 对 话 框 
间 来 回 跳 跃 。 洋 葱 皮 一 词 来 源 于 一 种 传统 的 动画 制作 
技术 ,即使 用 很 薄 的 、 半 透明 的 描 图 纸 来 查看 动画 序列 。 

“洋葱 皮 ” 打 开 后 ,当前 帧 之 前 或 之 后 的 帧 中 的 对 象 会 变 暗 ,以 便 与 当前 帧 中 的 对 象 区 别 
开 来 “洋葱 皮 ”列表 中 有 下 列 内 容 。 

“无 洋葱 皮 ”: 关闭 洋葱 皮 , 只 显示 当前 帧 的 内 容 。 

“显示 下 一 帧 ”: 显示 当前 帧 和 下 一 帧 的 内 容 。 

“之 前 和 之 后 ”: 显示 当前 帧 和 与 当前 帧 相 邻 的 帧 的 内 容 。 

“显示 所 有 帧 ”: 显示 所 有 帧 的 内 容 。 

“ 自 定义 ”; 设置 自 定义 帧 数 并 控制 洋 瓯 皮 的 不 透明 度 。 

“多 帧 编辑 ”: 可 以 选择 和 编辑 所 有 可 见 对 象 。 

选择 一 种 “洋葱 皮 "内容 后 ,在 帧 列表 的 可 见 范围 中 会 体现 出 来 。 

“GIF 动画 循环 ”设置 决定 动画 重复 的 次 数 。 可 以 设置 指定 循环 次 数 和 永久 循环 ,一 般 
默认 设置 为 永久 循环 。 

2. GIF 动画 的 优化 与 导出 

预览 GIF 动画 需要 使 用 Fireworks 文档 窗口 下 方 的 播放 按钮 ( 见 图 5-4) 。 预 览 GIF 动 
画 如 果 感 觉 动作 太 快 或 太 慢 , 可 以 调整 “ 帧 延 时 ”(CS 版 本 为 “ 帧 延迟 ”); 如 果 感 觉 动作 跳动 
性 太 大 ,可 以 再 增加 动画 的 帧 数 (CS 版 本 的 状态 数 ) 进 行 调整 。 

动画 制作 好 后 就 可 以 将 文件 导出 为 动画 了 。 导 出 GIF 动画 需要 在 “优化 面板 中 设置 
导出 文件 类 型 为 “GIF 动画 ”, 为 了 减少 动画 的 字 节 尺寸 ,可 以 设置 动画 的 “失真 "和 “颜色 ” 数 
量 。 如 果 导 出 背景 透明 的 GIF 动画 ,需要 在 “透明 选择 ”列表 中 选择 “索引 色 透 明 ”。 

优化 完成 之 后 ,使 用 “文件 ”1“ 导 出 ”命令 导出 动画 。 在 “导出 ”对 话 框 内 “导出 ” 栏 需要 选 
择 “ 仅 图 像 ”, 输 入 导出 文件 名 ,选择 保存 目录 , 单 击 “ 导 出 ”按钮 完成 GIF 动画 导出 。 

3. GIF 动画 种 类 

(1) 逐 帧 动画 。 逐 帧 动画 是 最 简单 的 GIF 动画 ,即将 图 片 分 帧 放置 。 制 作 逐 帧 动画 通 
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过 新 建 帧 .设置 帧 内 的 内 容 、 调 整 帧 延 时 .导出 动画 完成 。 

(2) 选择 动画 。 选 择 动画 可 以 通过 对 话 方式 设置 动画 的 帧 数 、 移 动 的 距离 .运动 的 方 
向 、 缩 放 以 及 不 透明 度 等 内 容 来 构造 动画 。 

选择 动画 的 制作 方法 如 下 : 

@ 在 第 1 帧 中 放置 运动 的 对 象 。 

加 使 用 “修改 ”1“ 动 画 ”|“ 选 择 动画 ”命令 打开 “动画 ”设置 对 话 框 ,如 图 5-43 所 示 。 

一 般 只 需要 设置 动画 的 “ 帧 " 数 “ 缩 放 到 ”百分数 和 “不 透明 度 ”。 其 他 项 可 以 通过 调整 
动画 路 径 完成 。 

(3) 分 散 到 帧 动画 。 选 择 动画 虽然 可 以 通过 对 话 方式 设置 动画 的 帧 数 、 移 动 的 距离 、 运 
动 的 方向 、 缩 放 以 及 不 透明 度 等 内 容 , 但 是 其 运动 路 径 只 能 是 直线 。 如 果 和 希望 运动 路 径 是 曲 
线 ,只 能 使 用 逐 帧 动画 自己 逐 帧 制作 ,这样 无 疑 非常 麻烦 。 解 决 这 样 的 问题 可 以 使 用 "分 散 
到 帧 "GIF 动画 ,分 散 到 帧 动画 使 用 * 帧 ”面板 中 的 “分 散 到 帧 "按钮 将 一 帧 中 的 多 个 对 象 分 散 
到 多 个 帧 中 。 

(4) 带 背景 的 动画 。 当 动画 带 有 图 片 背景 时 ,因为 每 帧 都 需要 有 背景 图 片 , 所 以 需要 进 
行 必要 的 设置 。 设 置 方法 是 使 用 如 图 5-44 所 示 “ 层 ”面板 中 的 “选项 ”菜单 。 


新 建 图 你) 
新 建屋 四 
日 | 如 | | 加 县 2 | 
日 如 | 
‘as 
Ee] 
| 选中 图 层 
2 | 
bl | E 
多 MG 5 过 扣除 莹 版 
EEC 生机 加 丰硕 中 
旋转 R): ”可 5 硕 时 针 个 这 时 针 帮助 
将 层 组 至。 ， 
重 命名 面板 蛆 
Cw | nme 
图 5-43 选择 “动画 ”对 话 框 5-44 “ 层 ” 面 板 中 的 “选项 ”菜单 


首先 选中 作为 背景 图 片 的 图 层 ,打开 “ 层 ” 面 板 中 的 “选项 "菜单 ,选择 “共享 此 层 ” 命 令 
(在 CS 版 本 中 为 “在 状态 中 共享 层 ”)。 


5.6.5 标题 栏 GIF 逐 帧 动画 制作 


标题 栏 GIF 逐 帧 动画 prac5-1. gif 是 由 两 帧 图 像 构成 的 ,两 帧 图 像 如 图 5-45 所 示 。 
该 逐 帧 动画 制作 方法 如 下 : 
(1) 新 建 Fireworks 文档 ,画布 大 小 设置 为 990X80px, 画 布 颜色 设置 为 #BD9CFF。 
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期 待 您 平 指导 侣 向 
图 5-45 逐 帧 动画 内 容 


(2) 使 用 文本 工具 书写 文字 * 欢 迎 欣 赏 了 熙 作品 ,隶书 ,60px, 颜 色 #006699。 绘 制 白 
色 和 黑色 椭圆 制作 眼睛 图 形 。 

(3) 在 “ 帧 "面板 “选项 ”菜单 中 选择 “ 重 置 帧 ”, 复 制 当 前 帧 (在 CS 版 本 中 ,使 用 “状态 ” 面 
板 “ 选 项 菜单 中 的 “ 重 置 状 态 ”) 。 

(4) 选择 第 2 帧 ,将 文字 修改 为 “期 待 您 的 批评 指导 ”, 颜 色 修改 为 白色 。 调 整 眼珠 的 
位 置 。 

(5) 选中 所 有 帧 ,调整 帧 延 时 为 100/100s, 使 用 “播放 ”按钮 预览 动画 效果 。 

(6) 在 “优化 ?面板 中 设置 “导出 文件 格式 ”为 "GIF 动画 ,导出 动画 prac5-1. gif。 


5.6.6 透明 度 变化 GIF 选择 动画 制作 


该 动画 是 一 个 透明 度 变 化 的 选择 动画 ,制作 方法 如 下 : 

(1) 在 Fireworks 中 打开 图 片 images\tp5-5. jpg, 修 改 图 像 大 小 为 320 X240px。 

(2) 选中 图 片 ,使 用 “修改 ”1“ 动 画 ”|“ 选 择 动画 ”命令 在 如 图 5-43 所 示 的 选择 “动画 ”对 
话 框 中 进行 如 下 设置 。 

帧 (CS 版 本 为 状态 ): 30 ”添加 30 帧 


移动 : 0 不 移动 

方向 : 0 方向 不 变 

缩放 到 : 100 不 缩放 

不 透明 度 : 100 一 30 30 帧 中 不 透明 度 从 100% 变 化 到 30% 
旋转 : 0 不 旋转 


单 击 “ 确 定 ” 按 钮 之 后 ,会 有 自动 添加 帧 的 提示 信息 , 单 击 “ 确 定 ” 按 钮 在 “ 帧 "面板 中 添加 
30 帧 动画 。 

(3) 选中 最 后 一 帧 ,使 用 * 帧 ”面板 中 的 “新 建 / 重 置 帧 ”按钮 添加 第 31 帧 。 

(4) 选中 第 31 帧 ,导入 图 片 imagesNtp5-5.jpg, 修 改 图 像 大 小 为 320X240px。 

(5) 选中 第 31 帧 ,使 用 "修改 "| 动画 ?|* 选 择 动画 ”命令 将 前 面 选 择 动画 设置 中 的 “不 
透明 度 ” 修 改 为 30 一 100。 

(6) 使 用 “播放 ”按钮 预览 动画 效果 。 如 果 不 理想 ,调整 帧 延 时 。 

(7) 在 “优化 ?面板 中 设置 “导出 文件 格式 ?为 “GIF 动画 ”, 导 出 动画 prac5-5. gif。 


5.6.7 位 置 变化 GIF 选择 动画 制作 


这 是 一 个 带 背 景 图 片 的 位 置 变化 GIF 选择 动画 ,该 动画 是 利用 素材 图 片 images\ 
tp5-6. jpg 制作 的 飞机 不 断 从 机 场 起 飞 的 位 置 变化 GIF 选择 动画 。 素 材 图 片 tp5-6. jpg 如 
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图 5-46 所 示 。 

该 图 片 是 动画 的 背景 图 片 ,动画 中 的 运动 对 象 " 飞 
机 ?也 要 从 该 图 片 中 获得 。 制 作 该 动画 的 方法 如 下 : 

(1) 在 Fireworks 中 打开 图 片 images\tp5-6. jpg， 
使 用 “裁剪 "工具 裁剪 下 飞机 图 形 , 如 图 5-47(a) 所 示 。 

(2) 放大 图 像 , 使 用 “橡皮 擦 ” 工 具 擦 除 背景 ,使 用 
“修改 ”1“ 变 形 ”1“ 水 平 翻转 ”命令 制作 出 如 图 5-47(b) 
所 示 飞 机 图 形 ; 使 用 “缩放 ”工具 将 飞机 缩小 到 宽 
100px, 并 调整 出 一 个 仰角 ,如 图 5-47(c) 所 示 。 使 用 
“符合 画布 ”去掉 多 余 的 画布 。 选 中 飞机 图 像 , 使 用 Ctrl 十 C 键 复制 飞机 图 形 。 


5-46 ”素材 图 片 tp5-6. jpg 


i ss 


(a) "裁剪 "下 飞机 (b) 擦 除 背 景 ,水 平 翻转 (9 缩小 ,调整 仰角 
5-47 制作 飞机 图 形 


(3) 在 Fireworks 中 打开 图 片 imagesN\tp5-6.jpg, 修 改 图 像 大 小 为 320X240px。 选 中 背 
景 图 片 ,在 “ 层 ” 面 板 “ 选 项 ”菜单 中 选择 “共享 此 层 ” 命 令 ,锁定 背景 层 。 

(4) 新 建 “ 动 画 ” 图 层 , 在 “动画 ”图 层 中 使 用 Ctrl 十 V 键 粘贴 飞机 图 片 。 放 置 在 图 片 右 
下 方 ,大 部 分 飞机 图 形 在 画布 外 面 。 

(5) 选中 * 飞 机 ?图 像 ,使 用 "修改 "| 动画 ”| 选择 动画 ”命令 在 “动画 ?面板 中 进行 如 下 


设置 。 
帧 (CS 版 本 为 状态 ): 40 ”添加 40 帧 
移动 : 72 不 修改 
方向 : 180 暂时 设置 为 水 平 向 左 运动 
缩放 到 : 50 飞机 移动 到 左上 角 后 缩小 到 50% 
不 透明 度 : 100 一 30 不 透明 度 变 为 30% 
旋转 : 0 不 旋转 


确定 添加 动画 帧 后 动画 的 初始 运动 路 径 如 图 5-48(a) 所 示 。 


(a) 使 用 参数 设置 的 初始 运动 路 径 (b) 使 用 鼠标 拖 动 修改 后 的 运动 路 径 
图 5-48 选择 动画 运动 路 径 
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使 用 鼠标 拖 动 动画 运动 路 径 的 两 个 端点 ,可 以 改变 动画 运动 路 径 的 移动 距离 方向、 起 
点 ,终点 位 置 ,起 点 ,终点 位 置 可 以 设置 到 画布 外 面 。 图 5-48(b) 是 拖 动 后 的 动画 运动 路 径 。 

(6) 使 用 “播放 ”按钮 预览 动画 效果 。 如 果 不 理想 ,调整 帧 延 时 。 

(7) 在 “优化 ?面板 中 设置 导出 文件 格式 ?为 "GIF 动画 ”, 导 出 动画 prac5-6. gif。 
5.6.8 分 散 到 帧 GIF 动画 制作 

分 散 到 帧 GIF 动画 prac5-7. gif 是 一 个 月 落 西山 的 动画 ,月 亮 沿 着 一 个 弧 线 落 到 山 后 。 
该 动画 制作 方法 如 下 : 

(1) 在 Fireworks 中 打开 图 片 images\tp5-7. jpg, 修 改 图 像 大 小 为 320X240px。 使 
“ 滤 镜 ”| “调整 颜色 ”|“ 亮 度 /对比 度 ”命令 调整 图 片 亮 度 使 其 呈现 出 夜景 效果 。 

(2) 在 “ 层 ” 面 板 * 选 项 "菜单 中 选择 “共享 此 层 ” 命 令 ,锁定 背景 层 。 

(3) 新 建 “动画 "图 层 ,在 “动画 ”图 层 中 使 用 “椭圆 ”工具 绘制 一 个 白色 正 圆 “月 亮 ”, 为 月 
亮 添 加 “发 光 ” 滤 镜 效果 。 发 光 颜 色 选择 白色 。 

(4) 复制 .粘贴 月 亮 ,将 复制 出 的 月 亮 移动 到 一 个 新 的 位 置 ,再 重复 复制 .粘贴 、 移 动 操 
作 , 直 到 形成 一 个 排列 到 山头 的 轨迹 。 再 复制 一 个 月 亮 ,将 其 移动 到 一 半 遮 住 山头 的 位 置 ， 
使 用 “刀子 ”工具 将 遮 住 山头 的 部 分 切除 。 

(5) 选中 所 有 的 “月 亮 " 图 形 , 单 击 帧 面板 中 的 “分 散 到 帧 "按钮 ,选中 所 有 帧 ,调整 帧 延 时 。 

(6) 在 帧 面板 中 新 建 一 帧 ,在 新 建 帧 中 导入 图 片 tp5-7. jpg, 使 用 * 滤 镜 ”|* 调 整 颜色 ”| 
“亮度 /对 比 度 ” 命 令 调 整 图 片 亮度 ,使 其 呈现 出 比 有 月 亮 时 更 暗 的 夜景 效果 。 

(7) 设置 “循环 方式 ”为 “无 循环 ”。 

(8) 在 “优化 ?面板 中 设置 “导出 文件 格式 ?为 “GIF 动画 ”, 导 出 动画 prac5-7. gif。 
5.6.9 ”和 首 品 欣赏 "网 页 制作 

“作品 欣赏 "网 页 prac5-1. html 页 面 布局 简单 ,制作 方法 如 下 : 

(1) 在 Dreamweaver 中 打开 本 地 站 点 ,新 建 HTML 文档 ,另存 为 prac5-1. html。 

(2) 插入 一 个 3 行 1 列 表格 ,表格 宽度 为 990px,border 二 “0”, 居 中 对 齐 。 

(3) 在 第 1 行 插入 页 面 标题 GIF 动画 images\prac5-1. gif。 

(4) 在 第 2 行 插入 一 个 2 行 3 列表 格 ,表格 宽度 为 990px,border 二 “2”,cellpadding 王 
“2”,cellspacing=“2”,bordercolor="“ # BD9CFF”, 

(5) 在 相应 单元 格 内 插入 对 应 作品 文件 。 

(6) 在 最 下 面 一 行 中 插入 “返回 ? 超 链接 (居中 对 齐 ) ,链接 到 prac5. html。 


5.7 “网 页 图 像 编 辑 ” 栏 目 首页 制作 


该 栏目 首页 是 使 用 Fireworks 制作 的 页 面 ,在 Fireworks 中 整体 制作 页 面 效 果 , 最 后 将 
页 面 切割 成 切片 ,导出 为 HTML 文档 ,再 使 用 Dreamweaver 对 网 页 文档 进行 编辑 。 下 面 根 
据 图 5-1 栏目 首页 设计 要 求 完成 该 网 页 的 制作 。 
5.7.1 Logo 制作 


(1) 新 建 Fireworks 文档 ,画布 大 小 为 200X200px, 绘 制 一 个 200X200px 白色 矩形 , 填 
充 选择 “放射 状 ”, 颜 色 选 择 #A66650 和 白色 ,纹理 选择 “ 木 纹 ”, 纹 理 总 量 选择 80% 。 
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(2) 新 建 图 层 , 在 新 建 图 层 中 使 用 文本 工具 输入 一 个 大 写字 母 “Y”, 字 体 选 择 Arial 
Black, 大 小 为 80px。 

(3) 选中 字母 Y, 使 用 “文本 ”| “转换 为 路 径 ” 命 令 将 文字 转换 为 图 形 。 

(4) 选中 字母 了 ,填充 类 别 选择 “线性 ”, 颜 色 选择 #003300 和 并 00FF00, 调 整 填充 方向 。 

(5) 选中 字母 Y, 添 加 * 滤 镜 ”|* 阴 影 和 光量 ?| * 纯 色 阴影 ”距离 选 择 8px, 颜 色 选 择 
并 003300。 

(6) 新 建 图 层 , 在 新 建 图 层 中 使 用 椭圆 工具 绘制 一 个 笔触 为 红色 (无 填充 色 ) 的 100 xX 
100px 正 圆 ,使 字母 Y 图 形 在 圆 形 中 间 。 选 中 正 圆 图 形 , 使 用 “刀子 ”工具 水 平 切除 “Y” 图 形 
下 面 的 弧 线 ( 切 两 次 ) ,删除 切 掉 的 圆 弧 。 使 用 文本 工具 输入 文字 *China sun xiao ya” ,字体 选择 
Arial Black, 大 小 为 20px, 颜 色 选 择 #006699。 同 时 选中 文字 和 圆 弧 , 使 用 “文本 ”|“ 附 加 到 
路 径 ” 命 令 将 文字 排列 到 圆 弧 上 。 调 整 “文本 偏 移 ” 使 文字 位 置 对 称 (在 CS 版 本 中 由 于 没有 
“文本 偏 移 ” 属 性 ,该 操作 比较 麻烦 ) 。 选 中 文字 ,添加 “ 滤 镜 ”|* 阴 影 和 光 暴 ?|* 内 侧 阴影 ”。 

(7) 新 建 图 层 , 在 新 建 图 层 中 使 用 椭圆 工具 绘制 一 个 笔尖 大 小 为 3px, 颜 色 为 # 33ffff 
(无 填充 色 ) 的 90X90px 正 圆 , 使 字母 Y 图 形 在 圆 形 中 间 。 选 中 圆 形 ,添加 * 滤 镜 ”|* 阴 影 和 
光 晕 ?| 内侧 阴 影 ”; 使 用 椭圆 工具 绘制 一 个 笔尖 大 小 为 3px, 颜 色 为 #009999( 无 填充 色 ) 
的 140X140px 正 圆 ,使 字母 Y 图 形 在 圆 形 中 间 。 选 中 圆 形 ,添加 * 滤 镜 ”|* 阴 影 和 光 晕 ”| 
“内 侧 阴影 ”。 

(8) 在 优化 面板 中 选择 “导出 文件 格式 ”为 “jpeg”, 使 用 “文件 ”| 
“导出 ”命令 导出 文件 logo. jpg。 关 闭 Fireworks 文档 ,打开 logo. 
jpg。 使 用 椭圆 工具 绘制 一 个 填充 色 为 黑色 ,大 小 为 145X 145px 的 
正 圆 矢量 蒙 版 元 件 , 将 Logo 图 形 盖 住 。 选 中 圆 形 ,使 用 Ctrl 十 X 前 
切 矢量 蒙 版 ,选中 Logo 图 形 ,使 用 * 编 辑 |* 粘 贴 为 蒙 版 ”命令 制作 
矢量 蒙 版 图 形 。Logo 图 形 效果 如 图 5-49 所 示 。 

(9) 选中 画布 ,选择 “符合 画布 "。 在 优化 面板 中 选择 “导出 文件 
格式 ”为 “gif”,“ 透 明 效 果 类 型 "选择 “索引 色 透 明 ”, 使 用 “文件 ”|“ 导 
出 ”命令 导出 文件 logo. gif。 

5.7.2 Banner 制作 


该 栏目 首页 Banner 设计 如 图 5-50 所 示 。 该 Banner 中 最 底层 是 一 个 线性 渐变 填充 矩形 ， 
上 面 有 一 个 渐变 线性 填充 的 装饰 条 。 在 装饰 条 之 上 有 使 用 素材 图 片 tp5-2. jpg .tp5-3. jpg、 
tp5-4. jpg 制作 的 矢量 蒙 版 效果 图 像 , 有 使 用 素材 图 片 tp5-9. jpg 制作 的 花 打 和 放射 状 渐变 
填充 文字 图 形 。 


图 5-49 Logo 图 形 效果 


图 5-50 栏目 首页 Banner 设计 
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1. 矢量 蒙 版 效果 图 像 制作 

(1) 在 Fireworks 中 打开 素材 图 片 images\tp5-4. jpg, 将 图 像 大 小 调整 为 200X150px。 制 
作 110X110px 圆 形 矢量 蒙 版 元 件 ,调整 好 遗 挡 位 置 ,制作 蒙 版 效果 图 像 , 如 图 5-51(a) 所 示 。 

(2) 新 建 一 个 图 层 , 在 新 建 图 层 中 绘制 一 个 颜色 为 # ADFFB4、120X120px 的 圆 形 ,再 
用 红色 绘制 一 个 108X108px 圆 形 ,使 两 个 圆 形 同心 。 选 中 两 个 圆 形 ,使 用 “修改 ”1“ 组 合 路 
径 ?|* 打 孔 ? 命 令 得 到 一 个 圆 环 。 绘 制 一 个 矩形 , 遮 住 圆 环 的 布 上 方 的 1/4, 选 中 矩形 和 圆 
环 , 使 用 “修改 1“ 组合 路 径 ”1“ 打 孔 ” 命 令 得 到 一 个 3/4 的 圆 环 ,如 图 5-51(b) 所 示 。 

(3) 将 3/4 圆 环 和 蒙 版 效果 图 形 的 圆心 对 齐 , 选 中 图 片 和 圆 环 ,使 用 “修改 ”1“ 组 合 ” 命 
令 将 其 组 合成 一 个 图 像 ,如 图 5-51(c) 所 示 。 文 件 另存 为 templ. png( 临 时 文件 ) 。 


(a) 矢量 蒙 版 图 形 (b) 3/4 圆 环 (c) 组 台 图 形 
图 5-51 矢量 蒙 版 效果 图 像 制作 


(4) 打开 素材 图 片 images\tp5-8. jpg。 仿 照 步骤 (1) 一 (3) ,将 图 像 大 小 调整 为 200X 
150px, 制 作 92X92px 圆 形 矢量 蒙 版 元 件 ,调整 好 遮挡 位 置 ,制作 蒙 版 效果 图 像 ， 圆 环 的 制 
作 外 圆 颜色 使 用 # ADCFFF ,大 小 为 102X102px, 内 圆 大 小 为 90X90px; 圆 环 的 缺口 选择 
左上 方 大 约 1/5 即 可 。 最 后 将 其 组 合成 一 个 图 形 ,文件 另存 为 temp2. png。 

(5) 打开 素材 图 片 images\tp5-3. jpg, 将 图 像 大 小 调整 为 150X 100px, 制 作 70X70px 
圆 形 矢量 蒙 版 元 件 ,调整 好 遮挡 位 置 ,制作 蒙 版 效果 图 像 ， 圆 环 的 制作 外 圆 颜 色 使 用 
#E4FFAD, 大 小 为 80X80px', 内 圆 大 小 为 78X78px; 圆 环 的 缺口 选择 左上 方 大 约 1/5, 制 
作 完 成 圆 环 后 将 缺口 旋转 到 正 上 方 。 最 后 将 其 组 合成 一 个 图 形 ,文件 另存 为 temp3. png。 

2. 制作 花灯 

(1) 打开 素材 图 片 images\tp5-9. jpg。 

(2) 使 用 “魔术 棒 ” 工 具 ,“ 容 差 ” 设 置 为 50, 单 击 花 打 建立 选区 。 对 于 花 打 上 没有 选中 的 
区 域 (如 花心 ) ,选择 “椭圆 选取 框 " 工 具 , 按 住 Shift 键 , 框 选 花 条 内 部 没有 选中 的 区 域 ,将 没 
有 选中 的 部 分 添加 到 选区 中 。 

(3) 使 用 Ctrl 十 C 键 复制 选取 的 花 条 ,新建 Fireworks 文档 , 按 Ctrl 十 V 键 粘 贴 复 制 的 
花 采 图 形 , 文 件 另存 为 temp4. png。 

3. Banner 制作 

(1) 新 建 Fireworks 文档 ,画布 大 小 为 960X170px。 绘 制 一 个 960X170px 矩形 ,选择 
渐变 线性 填充 ,填充 色 为 白色 和 # BF9FFF ,适当 调整 填充 方向 。 

(2) 使 用 钢笔 工具 绘制 装饰 条 ,如 图 5-52 所 示 , 使 用 渐变 填充 工具 为 装饰 条 填充 颜色 
为 # ADFFB4、# E9FFBC 和 白色 的 线性 渐变 色 。 

(3) 导入 logo. gif, 调 整 大 小 放置 在 适当 的 位 置 ; 导入 前 面 保存 的 矢量 蒙 版 效果 图 形 
templ. png、temp2. png、temp3. png, 放 置 在 适当 的 位 置 。 


CE @ ) 静态 网 站 制作 项 目 教程 


图 5-52 绘制 装饰 条 


(4) 导入 前 面 保存 的 花 休 图 片 temp4. png, 调 整 大 小 放置 在 适当 位 置 ; 选中 花 休 图 片 ， 
复制 .粘贴 ,将 复制 出 的 花 采 移动 到 适当 的 位 置 ,调整 大 小 ,使 用 * 滤 镜 ?|* 调 整 颜色 ”|* 色 相 / 
饱和 度 ” 命 令 调整 花 打 颜色 。 

(5) 新 建 图 层 , 在 新 建 图 层 中 使 用 文本 工具 输入 文字 * YY 主页”, 大 小 选择 60px, 字 体 
选择 “华文 新 魏 "。 选 中 文字 ,使 用 “文本 ”|“ 转 换 为 路 径 "|“ 修 改 ”1“ 取 消 组 合 "命令 选中 各 个 
文字 , 摆 放 到 合适 的 位 置 。 

(6) 选中 一 个 文字 图 形 ,选择 “任意 变形 ”工具 对 文字 进行 缩放 。 将 所 有 文字 缩放 到 和希 
望 的 大 小 ,调整 文字 位 置 。 

(7) 使 用 渐变 填充 工具 ,设置 线性 渐变 颜色 为 #8A3C3C、 白 色 和 #8A3C3C, 依 次 选中 
每 个 文字 为 其 填充 渐变 效果 。 

(8) 在 优化 面板 中 选择 “导出 文件 格式 ”为 “jpeg”, 导 出 文件 bnner. jpg。 


5.7.3 ” Fireworks 按钮 


Fireworks 按钮 可 以 具有 动态 效果 , 当 鼠 标 移动 到 按钮 上 面 或 鼠标 离开 按钮 后 ,按钮 会 
有 不 同 的 效果 显示 。 

1. Fireworks 按钮 制作 

在 Fireworks 中 制作 按钮 需要 在 “ 库 ” 面 板 中 通过 添加 元 件 完成 。“ 库 ”面板 及 使 用 “新 
建 元 件 ” 按 钮 打开 的 “元 件 属性 ”对 话 框 如 图 5-53 所 示 。 


5-53 “ 库 ” 面 板 及 “元 件 属性 ”对 话 框 
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制作 Fireworks 按钮 需要 在 “元 件 属 性 ”对 话 框 中 选择 “按钮 "类 型 , 单 击 “ 确 定 ” 按 钮 后 ， 
出 现 “ 按 钮 编辑 ”窗口 ,如 图 5-54 所 示 。 


释放 | 沿 过 | 按 下 | 按时 滑 过 | 活动 区 域 | 


5-54 “按钮 编辑 ”窗口 


在 “按钮 编辑 ”窗口 中 有 5 个 选项 卡 。“ 释 放 ” 表 示 按 钮 弹 起 时 的 状态 (初始 状态 );“ 滑 
过 ”表示 鼠标 移动 到 按钮 上 面 时 的 状态 ;“ 按 下 ”、“ 按 下 时 滑 过 ”是 按钮 被 按 下 之 后 的 状态 ; 
“活动 区 域 " 可 以 定义 按钮 的 敏感 区 域 。 一 般 按 钮 只 需要 “释放 ”和 *“ 滑 过 ”两 个 状态 ,除非 在 
框架 结构 网 页 内 ,否则 * 按 下 ?“ 按 下 时 滑 过 ”状态 是 看 不 到 的 。 

制作 Fireworks 按钮 首先 在 “释放 ”选项 卡 内 制作 一 个 按钮 图 形 , 例 如 一 个 纯色 填充 的 、 
内 斜 角 滤 镜 效果 的 矩形 图 形 ,当然 也 可 以 填充 渐变 色 、 图 案 等 。 

“ 滑 过 ”选项 卡 如 图 5-55 所 示 。 通 过 “复制 弹 起 时 的 图 形 " 可 以 直接 把 “释放 ”选项 卡 中 
的 按钮 复制 过 来 ,只 需要 修改 填充 色 即 可 。 


释放 滑 过 | 按 下 | 按 下 时 洽 过 | 活动 区 域 | 


图 5-55 “ 滑 过 ?选项 卡 
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单 击 “ 完 成 ”按钮 完成 按钮 的 制作 。 

注意 : 如 果 使 用 CS 版 本 ,制作 按钮 是 在 “文档 库 ” 中 进行 。 制 作 按 钮 时 ,需要 从 “属性 ” 
面板 中 选择 “ 按 下 ”“ 滑 过 ”等 状态 。“ 复 制 弹 起 时 图 形 ” 按 钮 也 在 “属性 ”面板 中 。 

2. Fireworks 按钮 的 使 用 

在 网 页 中 使 用 Fireworks 的 按钮 可 以 采用 下 面 的 方式 。 

(1) 导出 按钮 。 制 作 好 按钮 元 件 之 后 ,将 按钮 元 件 从 * 库 ?面板 中 拖 动 到 画布 上 ,为 按钮 
添加 标题 名 称 。 选 择 画 布 , 单 击 “ 符 合 画 布 ? 按 钮 ,使 画布 符合 按钮 大 小 。 导 出 HTML 文档 
和 图 像 。 

在 Dreamweaver 中 使 用 * 搬 入 ”| * 图 像 对 象 "|*Fireworks HTML” 命 令 打开 “插入 
Fireworks HTML” 对 话 框 ,如 图 5-56 所 示 。 


插入 Fireworks HTNL x 


Fireworks ITIL 文件 由 .. 
选项 ， 厂 “插入 后 册 除 文件 帮助 


图 5-56 “插入 Fireworks HTML” 对 话 框 


在 “插入 Fireworks HTML” 对 话 框 中 通过 “浏览 ”按钮 找到 导出 的 HTML 文档 ,插入 
到 文档 窗口 的 当前 位 置 ,从 “属性 ”面板 设置 超 链接 。 

(2) 导出 切片 。 使 用 导出 按钮 方法 制作 Fireworks 按钮 需要 为 每 个 按钮 单独 导出 一 个 
HTML 文档 和 相应 的 图 像 文件 。 使 用 导出 切片 的 方法 可 以 在 一 个 Fireworks 文档 中 制作 
完成 按钮 元 件 之 后 ,从 * 库 ?面板 中 拖 出 多 个 元 件 实例 到 画布 上 ,每 个 按钮 实例 上 使 用 不 同 的 
文本 标题 ,这 样 一 次 可 以 制作 多 个 按钮 。 

导出 切片 制作 按钮 的 方法 详 见 5.7.4 小 节 。 


5.7.4 Web 切片 


使 用 方法 与 Dreamweaver 中 相同 ,可 以 制作 热点 图 像 ;“ 切 片 ” 工 具 用 于 切割 图 像 ,形成 图 像 
切片 。 

1. 图 像 切片 

使 用 Web “切片 ”工具 可 以 将 一 个 大 图 片 切割 成 若干 块 小 图 像 , 每 个 图 像 切 片 可 以 单独 
优化 。 导 出 后 ,在 Dreamweaver 中 使 用 时 可 以 按 顺 序 拼装 起 来 。 这 样 在 浏览 网 页 时 ,图 像 
将 分 块 显示 ,减少 下 载 等 待 时 间 。 

每 个 Web 切片 在 网 页 中 可 以 单独 进行 处 理 ,常用 的 是 为 切片 设置 超 链接 。 按 钮 元 件 实 
例 在 画布 上 会 自动 呈现 为 Web 切片 。 在 Fireworks 中 也 可 以 利用 图 像 切片 制作 导航 按钮 ， 
例如 本 栏目 首页 中 的 导航 栏 。 

2. 切片 行为 

在 Fireworks 中 可 以 为 Web 切片 添加 行为 。Fireworks 中 的 行为 和 Dreamweaver 中 
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的 一 些 行为 效果 是 一 致 的 ,Fireworks 中 的 行为 可 以 在 Dreamweaver 的 “行为 ”面板 中 编辑 。 
选中 一 个 切片 后 ,在 Fireworks“ 行 为 ”面板 中 单 击 “ 添 加 行为 ”按钮 打开 行为 菜单 ,如 
图 5-57 所 示 。 本 栏目 首页 中 不 同 的 图 片 显 示 就 是 Fireworks 的 “交换 图 像 ” 行 为 。 


简单 变换 图 像 G) 


交 执 图 你 1) 
恢复 交换 图 人 
设置 导航 栏 图 入 四 
洽 过 导入 栏 
拔 下 导航 栏 
Ln 
设置 弹出 订单) 
设置 六 栏 本 ) 


图 5-57 Fireworks 行为 菜单 


3. 导出 切片 
在 Fireworks 文档 中 制作 了 切片 之 后 ,需要 导出 为 网 页 文档 才能 在 网 站 中 浏览 。 导 出 
切片 的 方法 有 以 下 两 种 。 
(1) 导出 HTML 文件 。 在 选择 “导出 ”操作 后 ,“ 导 出 ”对 话 窗口 的 参数 选择 如 图 5-58 
所 示 。 
文件 名 四; 一 一 一 一 一 输入 导出 文件 名 .html 图 
时 出: [mL 和 图 入 选择 "HTML 和 图 像 ” 图 
JWLOD :| 导出 HT 文件 一 一 量 一 选择 "导出 HTML 文 件 ” 
切片 四 :| 导出 切片 图 
页 面 : [当前 页 面 
EST 
回 包 括 无 切片 区 域 C) 
rr 


图 5-58 导出 HTML 文件 “导出 "对话 框 的 参数 选择 


导出 的 网 页 文件 一 般 会 选择 站 点 根 目 录 。 但 是 ,一 般 情况 下 ,导出 的 切片 文件 会 较 多 ， 
为 了 避免 在 站 点 根 目录 下 存放 一 大 批 切片 文件 ,需要 预先 在 站 点 内 创建 一 个 存放 切片 文件 
的 文件 夹 , 在 “导出 ”对 话 窗 口中 选中 “将 图 像 放 入 子 文件 夹 " 复 选 框 ,通过 “浏览 ”按钮 确定 存 
放 切 片 文件 的 文件 夹 。 

使 用 “导出 HTML 文件 ”的 方法 导出 后 ,在 Dreamweaver 中 打开 导出 的 网 页 文件 就 可 
以 编辑 ,例如 给 切片 设置 超 链接 ,删除 GIF 动画 位 置 的 切片 ,替换 GIF 动画 等 。 但 是 ,在 使 
用 “导出 HTML 文件 ?的 方法 导出 的 网 页 中 ,本 地 预览 时 会 发 生 超 链接 失效 。 这 时 可 以 在 
Dreamweaver 代码” 窗口 中 找到 


I-- saved from url= (0014)about:internet --> 
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代码 行 , 将 其 删除 (如 果 不 删除 该 行 ,发 布 到 远程 站 点 后 ,在 Internet 上 浏览 没有 问题 )。 
(2) 复制 到 剪贴 板 。 在 选择 “导出 ”操作 后 ,“ 导 出 ”对 话 框 的 参数 选择 如 图 5-59 所 示 。 


文件 名 四 : 一 一 一 一 一 导出 文件 名 .jpg Y 
导出 : [NTNL 和 图 像 汉 
HL QD; | 复制 到 允 贴 板 一 阐 一 选择 "复制 到 剪贴 板 ” 
切片 :| 导出 切片 回 
页 面 : [当前 页 面 
仅 已 渤 切 片 包 ) ET 
思 包 括 无 切片 区 域 将 图 从 用 入 子 文件 诡 全 ) 
浏览 @)... ] 


5-59 ”复制 到 剪贴 板 “ 导 出 ”对 话 框 的 参数 选择 


选择 “复制 到 剪贴 板 ” 导 出 时 ,复制 到 剪贴 板 的 只 是 . html 文件 ,切片 图 像 文件 还 是 要 
选择 存放 的 文件 夹 , 即 也 需要 事先 准备 一 个 存放 切片 文件 的 文件 夹 。 确 定 导 出 之 后 ,在 
Dreamweaver 中 新 建 一 个 HTML 文档 , 先 在 本 地 站 点 中 保存 一 下 ,然后 使 用 Ctrl 十 V 键 将 
剪贴 板 中 的 HTML 文件 粘贴 到 文档 窗口 中 ,再 进行 网 页 编辑 。 

使 用 “复制 到 剪贴 板 ” 导 出 的 网 页 中 不 存在 本 地 浏览 超 链接 失效 的 问题 。 


5.7.5 ”图 像 编 辑 工具 " 栏目 页 面 制 作 


1. 导入 Banner 图 像 

新 建 Fireworks 文档 ,画布 大 小 为 960X680px。 导 入 banner. jpg, 放 置 在 画布 顶部 。 使 
用 Web 切片 工具 将 Banner 切 成 一 个 960X680px 的 切片 。 

2. 制作 导航 栏 

(1) 绘制 一 个 960 X40px 矩形 ,使 用 渐变 线性 填充 ,填充 色 使 用 白色 和 # BE9DFF 颜 
色 , 填 充 方 向 由 下 到 上 。 

(2) 绘制 一 个 150X30px 和 矩形 ,使 用 渐变 线性 填充 ,填充 色 使 用 白色 和 # BE9DFF 颜 
色 ,填充 方向 由 上 到 下 。 抵 形 圆 度 选择 100; 添加 “内 斜 角 ” 滤 镜 效果 ,“ 和 斜 角 边缘 形状 ”选择 
“平滑 ”, 放 置 在 背景 矩形 内 。 复 制 3 个 按钮 ,放置 到 适当 位 置 。 在 按钮 上 书写 大 小 为 20px、 
颜色 为 #006699 ,字体 为 黑体 的 标题 文字 。 

(3) 使 用 Web 切片 工具 对 导航 栏 按照 图 5-60 的 样式 进行 切片 ,切片 高 度 为 40px。 


DY li) | Sods) | list | tri | 


5-60 ”导航 栏 切片 样式 


3. 制作 装饰 条 

(1) 在 导航 栏 下 面 绘制 一 个 960X50px 矩形 ,使 用 渐变 线性 填充 ,填充 色 使 用 白色 和 间 
BE9DFF 颜色 ,填充 方向 由 下 到 上 .。“ 纹 理 ? 设 置 为 “水平线 1”,“ 纹 理 总 量 " 设 置 为 100。 再 
绘制 一 个 大 椭圆 到 加 在 矩形 之 上 ,选中 矩形 和 大 椭圆 ,使 用 “修改 *1“ 组 合 路 径 ”1“ 打 孔 ” 命 
令 , 再 添加 “投影 " 滤 镜 ,完成 装饰 条 制作 。 装 饰 条 效果 如 图 5-61 所 示 。 
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图 5-61 装饰 条 效果 


(2) 复制 装饰 条 ,使 用 “修改 ”1 “变形 ”1“ 垂 直 反 转 ” 命 令 ,将 反 转 后 的 装饰 条 放置 在 画布 
底部 。 

4. 制作 导航 按钮 

(1) 在 “ 库 ” 面 板 中 单 击 “ 新 建 元 件 ” 按 钮 ,在 “元 件 属性 ”对 话 框 中 ,“ 类 型 "选择 “按钮 ”， 
打开 按钮 制作 窗口 。 

(2) 在 “释放 ”窗口 中 绘制 一 个 150X60px 椭圆 ,使 用 渐变 线性 填充 ,填充 色 使 用 白色 和 
# BE9DFF 颜色 ,填充 方向 由 下 到 上 。 添 加 “内 和 斜 角 ” 滤 镜 效 果 ,“ 斜 角 边缘 形状 "选择 “ 平 
滑 ”, 斜 面 宽 度 选 择 16。 

(3) 在 “ 滑 过 ”窗口 中 单 击 “复制 弹 起 时 的 图 形 ” 按 钮 ,调整 填充 方向 为 从 上 到 下 , 单 击 
“完成 "按钮 。 

(4) 从 * 库 ?面板 中 拖 出 4 个 按钮 元 件 实例 到 页 面 设计 位 置 , 左 端 对 齐 ; 在 每 个 按钮 元 件 
实例 上 书写 大 小 为 18px、 宋 体 、 颜 色 为 #006699 的 标题 文字 。 

5, 制作 切片 交换 图 像 行为 

(1) 导入 图 片 images\tp5-10. jpg, 使 用 Web 切片 工具 在 tp5-10. jpg 图 片上 制作 一 个 切 
片 ; 在 图 片 顶 部 按照 设计 书写 “开心”“ 究 室 ”“ 相 聚 " “校园 " “回忆”, 使 用 Web 切片 工具 
在 文字 上 制作 5 个 切片 。 

(2) 选中 “开心 ”切片 ,在 “行为 "面板 中 为 该 切片 添加 “交换 图 像 ”行为 (也 可 以 右 击 切 
片 ,在 弹出 菜单 中 选择 “添加 交换 图 像 行 为 "命令 ), 打 开 “ 交 换 图 像 ”行为 设置 对 话 框 ,如 
图 5-62 所 示 。 


交换 图 像 的 切片 


选择 交换 的 图 像 文 件 
ET 


图 5-62 “交换 图 像 行 为 设置 对 话 框 


在 “交换 图 像 ” 行 为 设置 对 话 框 中 需要 选择 交换 图 像 的 切片 (图 像 显 示 区 域 ) 和 选择 交换 
的 图 像 文件 ,对 于 “开心 ”切片 选择 的 交换 图 像 文 件 为 images\tp5-11. jpg。 
注意 :“ 筷 标 移 开 时 复员 图 像 ” 复 选 框 需要 保持 选中 ,否则 当 鼠 标 移动 到 "开心 "切片 上 
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面 时 发 生 了 交换 图 像 行为 ,但 鼠标 移 开 后 ,不 会 恢复 原来 的 图 像 。 

(3) 仿照 上 一 步 的 做 法 ,依次 为 “ 究 室 ”“ 相 聚 "“ 校 园 ”“ 回 忆 ” 切 片 添加 “交换 图 像 * 行 
为 ,交换 的 图 片 分 别 使 用 images 文件 夹 中 的 tp5-12. jpg、 tp5-13. jpg、 tp5-14. jpg、 tp5- 
15. jpg。 

6.“ 自 我 介绍 "制作 

(1) 绘制 一 个 180X 320px 的 矩形 ,边线 宽度 为 3px, 颜 色 为 #4D2D4F, 白 色 实心 填充 ， 
设置 矩形 圆 度 为 30。 

(2) 绘制 一 个 156 X 50px 的 矩形 ,边线 宽度 为 1px, 颜 色 为 # 4D2D4F, 填 充 色 为 
井 977298, 设 置 矩 形 圆 度 为 30。 使 用 "刀子 ?工具 切除 小 圆 角 矩形 的 下 面 有 圆 角 的 部 分 ,使 
用 直线 工具 补充 边线 。 

(3) 绘制 大 小 两 个 圆 形 ,边线 宽度 为 6px, 颜 色 为 #2B042F, 白 色 实心 填充 ,放置 到 设计 
指定 位 置 。 在 设计 指定 位 置 书写 “自我 介绍 ”, 选 中 “自我 介绍 "文字 ,在 “资源 ”|“ 样 式 ” 中 选 
择 喜 爱 的 文字 填充 样式 。 

(4) 使 用 颜色 为 #003300、 大 小 为 14px 的 宋体 字 书 写 自我 介绍 内 容 。 

7. 网 页 切片 

使 用 Web 切片 工具 在 画布 中 没有 切片 的 部 分 制作 切片 ,注意 做 切片 时 要 整齐 ,尽量 对 
齐 ,否则 会 产生 许多 切片 文件 。 最 终 切片 如 图 5-63 所 示 。 


图 5-63 网 页 切片 


8. 设置 超 链接 
选中 导航 栏 中 的 “首页 ”切片 ,在 属性 窗口 超 链接 文本 框 内 输入 “index. html”; 选中 “ 作 
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品 欣 赏 "导航 按钮 切片 ,在 属性 窗口 超 链接 文本 框 内 输入 “prac5-1. html”。 

如 果 使 用 低 版 本 的 “三 剑客 ”, 也 可 以 跳 过 这 一 步 ,在 导出 后 通过 Dreamweaver 设置 超 
链接 更 直观 。 但 使 用 CS 版 本 的 “三 剑客 ”, 由 于 在 Dreamweaver CS 中 没有 超 链接 属性 ,所 
以 在 Fireworks 中 设置 超 链接 比较 方便 。 

9. 导出 网 页 

(1) 在 本 地 站 点 目录 内 新 建 一 个 文件 夹 。 

(2) 在 Fireworks 中 使 用 “文件 ”1“ 导 出 ”命令 ,在 “导出 ”窗口 中 , “保存 在 ”选择 本 地 站 
点 文件 夹 ,文件 名 使 用 prac5. html;“ 导 出 ?选择 “HTML 和 图 像 ”;“HTML” 选 择 “ 导 出 
HTML 文件 ”;“ 切 片 ”选择 “导出 切片 ”; 选中 “将 图 像 放 入 子 文件 夹 " 复 选 框 ,通过 “浏览 ” 按 
钮 选择 新 建 的 存放 切片 文件 的 文件 夹 , 单 击 “ 导 出 ”按钮 完成 导出 。 

(3) 打开 Dreamweaver, 在 本 地 站 点 内 打开 prac5. html。 

(4) 如 果 在 本 地 预览 ,需要 在 “代码 ”窗口 中 找到 


=!-- saved from url= (0014)about:internet --> 


代码 行 ,将 其 删除 。 

(5) 在 使 用 低 版 本 的 “三 剑客 "时 ,如 果 在 导出 切片 之 前 没有 设置 切片 的 超 链 接 , 需 要 选 
中 导航 栏 中 的 “首页 ”切片 ,在 属性 窗口 内 设置 超 链 接 到 index. html; 选中 “作品 欣赏 "导航 
按钮 ,在 属性 窗口 内 设置 超 链接 到 prac5-1. html。 

(6) 保存 文档 ,浏览 效果 。 


5.8 小 结 
本 章 主要 介绍 了 使 用 Fireworks 进行 图 像 编辑 和 制作 网 页 的 基本 方法 ,主要 包括 图 像 


的 优化 导出 ,常用 工具 的 使 用 ,矢量 图 形制 作 与 矢量 图 形 运算 ,图 形 填 充 效 果 、 滤 镜 效 果 、 蒙 
版 和 GIF 动画 制作 方法 、 按 钮 .切片 以 及 导出 网 页 的 方法 。 


5.9 习 题 
1. 矢量 图 形 和 位 图 有 什么 区 别 ? 
2. 透明 、 半 透明 图 像 可 以 使 用 哪 种 图 像 格 式 文件 存放 ? 
3. 什么 是 导出 优化 ? 
4. 改变 图 像 尺寸 大 小 有 哪些 方法 ? 
5. 图 像 另 存 为 和 导出 有 什么 区 别 ? 
6. 如 何 编辑 填充 效果 ? 
7. 什么 是 输入 色 阶 .输出 色 阶 ?降低 它们 的 最 大 强度 值 后 的 结果 是 否 一 样 ? 为 什么 ? 
8. 什么 是 蒙 版 ? 简要 说 明 制作 蒙 版 的 过 程 。 
9. 导出 GIF 动画 应 该 怎样 设置 优化 参数 和 导出 类 型 ? 


10. 如 何 制作 带 图 片 背景 的 GIF 动画 ? 
11. 导出 切片 时 的 操作 过 程 是 怎样 的 ?“ 导 出 HTML 文件 ”和 “复制 到 剪贴 板 ” 导 出 方 
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式 有 什么 不 同 ? 
12. 在 Fireworks 中 能 否 为 切片 或 按钮 设置 超 链接 ? 


5.10 实 训 : 图 像 编辑 与 个 人 网 站 制作 


1. 实 训 目的 

熟悉 图 像 编 辑 工具 Fireworks 的 使 用 ,练习 使 用 Fireworks 制作 网 页 。 

2. 实 训 任务 与 实 训 指导 

本 章 实 训 任务 包括 以 下 两 部 分 内 容 。 

(1) 完成 前 面 实 训 任务 中 需要 编辑 的 图 像 的 编辑 .GIF 动画 的 制作 。 

(2) 仿照 教学 项 目 网 站 中 “网 页 图 像 编 辑 ” 栏 目 设计 ,以 “个 人 网 站 ”为 主题 ,使 用 自己 的 
素材 制作 实 训 网 站 项 目 中 “个 人 网 站 ”栏目 ,发 布 到 远程 Web 服务 器 网 站 中 。 


实 训 任 务 5-1; 图 片 大 小 编辑 


将 实 训 网 站 项 目 中 自己 准备 的 图 片 按照 网 页 中 需要 的 尺寸 大 小 进行 修改 。 训 练 图 像 大 
小 编辑 与 优化 导出 技能 。 

(1) 打开 本 地 站 点 images 目录 中 自己 准备 的 各 个 素材 图 片 文件 ,按照 网 页 中 需要 的 尺 
寸 大 小 ,逐个 修改 尺寸 优化、 导出 覆盖 原来 的 文件 。 

注意 : 在 图 像 编辑 中 ,如 果 需 要 修改 图 像 透明 度 ,操作 方法 如 下 。 

选中 图 片 ,“ 属 性 ”面板 中 的 图 像 属性 如 图 5-64 所 示 。 


1 属性 到 
位 图 不 透明 度 一 日 loo | 名 正 党 Ss@ 

pe | 小 俩 ， 十 一 

更 za | x | 

过 ts jw 全 


5-64 图像 “属性 ”面板 


调整 “不 透明 度 ” 数 值 ,修改 图 片 的 “不 透明 度 ”。 不 透明 度 二 0(%) 时 ,表示 图 像 完全 透 
明 , 即 不 显示 图 像 。 

(2) 在 Dreamweaver 中 打开 本 地 站 点 ,逐个 打开 项 目 中 使 用 自 备 图 片 素材 的 网 页 ,将 
<img 之 标记 中 的 width、height 属性 删除 。 

(3) 在 本 地 站 点 中 浏览 Index. html 网 站 首页 ,检查 各 个 栏目 及 网 页 显示 是 否 正确 。 

(4) 在 Dreamweaver“ 文 件 ” 面 板 “ 本 地 视图 ”窗口 中 选择 站 点 名 称 , 单 击 * 上 传 ”按钮 , 重 
新 发 布 实 训 网 站 到 远程 Web 站 点 中 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 


打开 Web 网 站 首页 ,检查 各 个 栏目 及 网 页 显示 是 否 正确 。 
(6) 保存 本 地 站 点 。 
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实 训 任务 5-2; 渐变 填充 背景 图 片 制作 


完成 实 训 任务 2-7、 实 训 任务 4-4 中 渐变 填充 背景 图 片 tp2-9. jpg、tp4-2. jpg 的 制作 。 训 
练 适 量 图 形 渐变 填充 技能 。 

1. 任务 分 析 

在 实 训 任务 2-7 和 实 训 任务 4-4 中 使 用 的 背景 图 片 tp2-9. jpg 和 tp4-2. jpg 如 图 5-65 
所 示 。 


(a) tp2-9jpg 
me 


(b) tp4-2.jpg 


5-65 背景 图 片 tp2-9. jpg 和 tp4-2. jpg 


tp2-9. jpg 是 一 个 960X50px 大 小 、 使 用 # cfffff 颜色 和 白色 椭圆 形 渐变 填充 的 图 形 ; 
tp4-2.jpg 是 一 个 960X40px 大小、 使 用 # 64ff00 颜色 和 白色 线性 渐变 填充 的 图 形 。 使 用 矢 
量 图 形 填充 效果 可 以 实现 这 两 个 图 片 的 制作 。 

2. 图 片 tp2-9.jpg 制作 

(1) 新 建 Fireworks 文档 ,画布 大 小 使 用 960X50px, 夯 布 颜色 为 白色 。 

(2) 使 用 矢量 “和 矩形 ”工具 绘制 一 个 960X50px 的 矩形 ,选择 渐变 填充 中 的 “椭圆 形 ”。 

(3) 调整 填充 颜色 , 左 侧 色 块 调整 为 白色 , 右 侧 色 块 调整 为 # cfffff。 

(4) 使 用 选择 工具 中 的 “选取 工具 (指针 工具 )”, 单 击 和 矩形, 调整 纵横 轴 , 使 填充 效果 达 
到 设计 效果 。 

(5) 在 “优化 ”面板 中 选择 “jpeg” 导 出 格式 ,导出 到 本 地 站 点 images 文件 夹 中 ,文件 名 使 
用 tp2-9. jpg。 

(6) 将 新 制作 的 tp2-9. jpg 文件 上 传 到 远程 Web 站 点 。 

3. 图 片 tp4-2. jpg 制作 

(1) 新 建 Fireworks 文档 ,画布 大 小 使 用 960X40px, 夯 布 颜色 为 白色 。 

(2) 使 用 矢量 “矩形 工具 绘制 一 个 960X40px 的 矩形 ,选择 渐变 填充 中 的 “线性 ”。 

(3) 调整 填充 颜色 , 左 侧 色 块 调整 为 白色 , 右 侧 色 块 调整 为 #64ff00。 将 左 侧 色 块 拖 至 
中 间 , 在 左 侧 添加 一 个 色 块 , 色 块 颜色 选择 #64ff00。 

(4) 使 用 选择 工具 中 的 “选取 工具 (指针 工具 )”, 单 击 和 矩形 ,调整 填充 方向 为 上 下 方向 ， 
并 调整 填充 效果 为 设计 效果 。 

(5) 在 “优化 ”面板 中 选择 “jpeg” 导 出 格式 ,导出 到 本 地 站 点 images 文件 夹 中 ,文件 名 使 
用 tp4-2. jpg。 

(6) 将 新 制作 的 tp4-2. jpg 文件 上 传 到 远程 Web 站 点 。 


实 训 任务 5-3; 背景 图 片 tp4-2-1. jpg 的 制作 
完成 实 训 任 务 4-4 中 导航 栏 背景 图 片 tp4-2-1. jpg 的 制作 ,训练 钢笔 工具 的 使 用 方法 。 
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1. 任务 分 析 
在 实 训 任务 4-4 中 导航 栏 背景 图 片 tp4-2-1. jpg 如 图 5-66 所 示 , 图 片 大 小 为 960 X50px。 


es 


图 5-66 导航 栏 背景 图 片 tp4-2-1. jpg 


该 图 片 由 两 部 分 组 成 ,一 部 分 是 由 #d8d8d8 颜色 和 白色 构成 的 线性 渐变 填充 ; 另 一 部 
分 是 由 #006600 颜色 构成 的 实心 填充 图 形 。 

2. 制作 方法 

(1) 新 建 Fireworks 文档 ,画布 大 小 使 用 960X50px, 夯 布 颜色 为 白色 。 

(2) 使 用 矢量 “矩形 ”工具 绘制 一 个 960X50px 的 矩形 ,选择 渐变 填充 中 的 “线性 ”。 

(3) 调整 填充 颜色 , 左 侧 色 块 调整 为 白色 , 右 侧 色 块 调整 为 # d8d8d8。 将 左 侧 色 块 拖 至 
中 间 , 在 左 侧 添加 一 个 色 块 , 色 块 颜色 选择 # d8d8d8。 

(4) 使 用 选择 工具 中 的 “选取 工具 (指针 工具 )”, 单 击 矩 形 , 调 整 填充 方向 为 上 下 方向 ， 
并 调整 填充 效果 为 设计 效果 。 

(5) 新 建 一 个 图 层 , 在 新 建 图 层 中 使 用 “钢笔 ”工具 在 夯 布 上 绘制 如 图 5-67 的 形状 ,使 
用 #006600 颜色 填充 。 注 意 绘制 曲线 时 要 通过 拖 动 手柄 达到 圆 弧 效果 。 


LU 


5-67 使 用 "钢笔 "工具 绘制 形状 


(6) 在 “优化 ”面板 中 选择 “jpeg” 导 出 格式 ,导出 到 本 地 站 点 images 文件 夹 中 ,文件 名 使 
用 tp4-2-1. jpg。 
(7) 将 新 制作 的 tp4-2-1. jpg 文件 上 传 到 远程 Web 站 点 。 


实 训 任务 5-4; 网 站 首页 背景 图 片 制作 


使 用 自 备 图 片 制作 实 训 网 站 首页 背景 图 片 tp1-1.jpg。 训 练 矢 量 图 形 编辑 技能 。 

1. 任务 分 析 

静态 网 站 制作 实 训 网 站 首页 背景 图 片 images\tpl-1. jpg 如 图 5-68 所 示 。 该 图 包含 了 
图 形 填充 效果 、 路 径 运算 、 滤 镜 效 果 。 

2. 制作 方法 

(1) 新 建 Fireworks 文档 ,画布 大 小 使 用 960X580px, 画 布 颜色 为 白色 。 

(2) 准备 一 张 本 学 院 的 照片 ,将 学 院 的 照片 导入 到 图 层 1, 将 图 片 大 小 修改 为 150 X 
540px, 放 置 在 距 画 布 顶端 120px\ 左 端 65px 的 位 置 。 

(3) 在 图 层面 板 中 锁定 图 层 1 ,新建 图 层 2。 

(4) 在 图 层 2 中 绘制 一 个 960X120 的 矩形 ,使 用 颜色 #c2c2c2 填充 纹理? 选择 “水 平 
线 4”,“ 纹 理 总 量 ” 选 择 50% 。 锁 定 图 层 2 ,新 建 图 层 3。 

(5) 在 图 层 3 中 绘制 一 个 960X580 的 矩形 ,使 用 白色 和 #99ccff 色 上 下 方向 线性 渐变 
填充 ,调整 填充 效果 。 再 绘制 一 个 960 X150px 的 矩形 ,覆盖 在 学 院 照 片 的 上 面 (> 轴 坐 标 
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5-68 网 站 首页 背景 图 片 


120px) ,使 用 # 45a5ff 和 白色 上 下 方向 线性 渐变 填充 (中 间 白 色 , 上 下 使 用 # 45a5ff 颜色 ) 。 

(6) 绘制 一 个 800X800px 的 圆 形 ,放置 到 两 个 矩形 上 面 的 适当 位 置 ,同时 选中 圆 形 和 
两 个 矩形 ,选择 “修改 ”1“ 组 合 路 径 ”1“ 打 孔 ” 命 令 。 

(7) 选择 打 孔 后 的 剩余 图 形 ,添加 滤 镜 效果 ,选择 * 斜 角 和 浮雕 ”的 “ 凹 人 浮雕 ”。 锁 定 图 
层 3。 

(8) 新 建 图 层 4, 在 图 层 4 中 绘制 一 个 500X 150px 的 矩形 ,覆盖 在 学 院 照 片 的 上 面 
(y 轴 坐 标 120px) ,与 画布 左 端 对 齐 ,使 用 # 45a5ff 和 白色 上 下 方向 线性 填充 (中 间 白 色 , 上 
下 使 用 #45a5ff 颜色 ) 。 

(9) 绘制 一 个 600X360px 的 椭圆 ,放置 到 500X150px 矩形 上 面 的 适当 位 置 ,同时 选中 
椭圆 和 和 矩形 ,使 用 "修改 "|* 组 合 路 径 ”|* 打 孔 ” 命 令 ,选择 打 孔 后 的 剩余 图 形 ,添加 滤 镜 效果 ， 
选择 * 斜 角 和 浮雕? 的“ 凹 和 浮雕 ”。 

(10) 将 图 像 导出 到 本 地 站 点 images 文件 夹 中 ,文件 名 使 用 tp1-1. jpg。 

(11) 将 新 制作 的 tpl-1. jpg 文件 上 传 到 远程 Web 站 点 。 浏 览 网 站 ,查看 网 站 首页 背景 
是 否 更 换 成 了 新 制作 成 的 图 片 。 


实 训 任 务 5-5.; 位 图 蒙 版 Banner 背景 图 片 制作 


使 用 自 备 图 片 ,完成 实 训 任务 4-4 中 prac4. html 页 面 Banner 背景 图 片 tp4-1. jpg 的 制 
作 。 训 练 位 图 蒙 版 效果 图 像 制 作 。 

(1) 新 建 Fireworks 文档 ,画布 大 小 选择 960 X160px。 

(2) 导入 自 备 的 背景 图 片 ,调整 图 片 大 小 , 放 在 画布 右 端 。 

(3) 根据 网 站 主 色调 绘制 一 个 960X160px 的 纯色 填充 矩形 覆盖 画布 ,在 矩形 上 添加 位 
图 蒙 版 ,选择 “渐变 填充 ?工具 ,调整 透明 区 间 ,给 位 图 蒙 版 填充 渐变 效果 。 
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(4) 自己 设计 其 他 图 形 装 饰 。 
(5) 将 图 像 导出 到 本 地 站 点 images 文件 夹 中 ,文件 名 使 用 tp4-1. jpg。 
(6) 将 新 制作 的 tp4-1. jpg 文件 上 传 到 远程 Web 站 点 。 浏 览 网 站 效果 。 


实 训 任 务 5-6; 逐 帧 GIF 动画 制作 


完成 实 训 任 务 4-4 中 GIF 动画 tp4-5. gif 的 制作 ,使 动画 内 容 为 循环 显示 宿舍 中 各 个 同 
学 的 上 照片。 训练 GIF 逐 帧 动画 制作 技能 。 

(1) 使 用 以 前 准备 的 宿舍 中 每 个 同学 的 照片 .将 照片 尺寸 修改 为 410 X310px。 

(2) 在 Fireworks 中 打开 一 张 同学 照片 ,在 “ 帧 ”面板 中 添加 一 帧 ,将 另 一 个 同学 的 照片 
导入 ; 依次 炮制 ,将 每 个 同学 的 照片 导入 一 个 帧 中 。 选 中 所 有 帧 ,调整 “ 帧 延迟 ”为 
100/100s。 

(3) 导出 GIF 动画 到 本 地 站 点 images 目录 中 ,文件 名 使 用 tp4-5. gif, 覆 盖 原 文件 。 在 
本 地 站 点 查看 prac4. html 网 页 效果 。 

(4) 将 新 制作 的 tp4-5. gif 文件 上 传 到 远程 Web 站 点 。 浏 览 网 站 ,查看 效果 。 


实 训 任务 5-7， 镍 品 欣赏 " 网 页 制作 


使 用 自 备 图 片 ,参照 教学 项 目 中 “作品 欣赏 "网 页 内 容 与 效果 ,完成 实 训 网 站 项 目 中 * 作 
品 欣赏 ”网 页 prac5-1. html 的 制作 。 训 练 图 形 编辑 、 填 充 效果 、 蒙 版 效果 、GIF 动画 制作 
技能 。 

1. prac5-2. jpg 图 片 制作 

(1) 准备 3 张 风景 图 片 (不 需要 上 传 到 Web 网 站 ) 作 为 填充 图 像 和 贴图 图 像 使 用 。 

(2) 新 建 Fireworks 文档 ,画布 大 小 为 320X240px。 使 用 自 备 的 图 片 ,按照 5. 6. 1 小 节 
的 制作 方法 ,完成 图 形 填充 文字 球体 图 形制 作 和 贴图 笔 简 图 形制 作 。 

(3) 导出 图 片 到 本 地 站 点 images 目录 中 ,文件 名 使 用 prac5-2. jpg。 

2. prac5-3. jpg 图 片 制作 

(1) 准备 一 张 自 己 的 风景 照片 ,在 Fireworks 中 修改 照片 大 小 为 320 X240px。 

(2) 使 用 位 图 “橡皮 图 章 " 工 具 克 隆 人 物 图 像 。 

(3) 导出 图 片 到 本 地 站 点 images 目录 中 ,文件 名 使 用 prac5-3. jpg。 

3. prac5-4. jpg 图 片 制作 

(1) 准备 一 张 自 己 的 风景 照片 ,在 Fireworks 中 打开 准备 的 照片 ,修改 照片 大 小 为 
320 X240px。 

(2) 新 建 图 层 ,选中 新 建 图 层 ,使 用 “矩形 ”工具 绘制 一 个 320X240px 的 矩形 ,填充 颜色 
自己 选择 合适 的 颜色 。 选 中 绘制 的 矩形 ,在 * 层 ?面板 中 添加 * 蒙 版 ”。 

(3) 选择 “刷子 ”工具 ,修改 工具 的 笔 形 、 大 小 ,颜色 使 用 “黑色 ”, 在 蒙 版 中 部 涂抹 , 擦 出 
人 物 图 像 ; 调整 “不 透明 度 ”, 涂 抹 蒙 版 其 余部 分 , 擦 出 半 透 明 效 果 。 

(4) 导出 图 片 到 本 地 站 点 images 目录 中 ,文件 名 使 用 prac5-4. jpg。 

4. 标题 栏 GIF 动画 prac5-1. gif 制作 

(1) 新 建 Fireworks 文档 960X80px, 画 布 颜色 自己 选择 。 

(2) 使 用 自己 的 信息 ,仿照 5. 6. 5 小 节制 作 标题 栏 逐 帧 GIF 动画 。 
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(3) 预览 效果 ,调整 帧 速 。 

(4) 优化 设置 为 “GIF 动画 ”, 导 出 GIF 动画 到 本 地 站 点 images 目录 中 ,文件 名 使 
prac5-1. gif。 

5. 透明 度 变化 GIF 动画 prac5-5. gif 制作 

(1) 准备 一 张 自 己 的 风景 照片 在 Fireworks 中 打开 ,修改 图 像 大 小 为 320X240px。 

(2) 仿照 5. 6. 6 小 节制 作 透 明度 变化 GIF 选择 动画 。 

(3) 预览 效果 ,调整 帧 速 或 动画 帧 数 ,达到 满意 效果 为 止 。 

(4) 优化 设置 为 "GIF 动画 ”, 导 出 GIF 动画 到 本 地 站 点 images 目录 中 ,文件 名 使 用 
prac5-5. gif。 

6. 位 置 变化 GIF 动画 pracs-6. gif 制作 

使 用 素材 图 片 images\tp5-6. jpg, 制 作 实 训 网 站 项 目 中 大 小 为 320 X 240px、 位 置 变化 
GIF 选择 动画 prac5-6. gif。 在 动画 中 加 入 作者 信息 :“ 作 者 : X X 班 X xX Xx”。 

(1) 打开 本 地 站 点 images 目录 中 的 图 片 tp5-6. jpg。 

(2) 从 图 片 中 裁剪 飞机 图 像 , 制 作 “ 飞 机 ”图 形 。 

(3) 再 打开 图 片 tp5-6. jpg, 修 改 图 像 大 小 为 320X240px。 在 背景 图 片 下 方 加 入 作者 信 
息 :“ 作 者 : XX 班 XX X”, 设 置 “ 共 享 此 层 ”。 参 照 5. 6. 7 小 节制 作 飞 机 图 形 和 飞机 不 断 起 
飞 的 位 置 变 化 GIF 选择 动画 。 

(4) 预览 效果 ,调整 帧 速 或 动画 帧 数 ,直到 达到 满意 效果 为 止 。 

(5) 优化 设置 为 "GIF 动画 ”, 导 出 GIF 动画 到 本 地 站 点 images 目录 中 ,文件 名 使 用 
prac5-6. gif 。 

7. 分 散 到 帧 GIF 动画 prac5-7. gif 制作 

使 用 素材 图 片 images\tp5-7. jpg, 制 作 实 训 网 站 项 目 中 大 小 为 320X240px、 分 散 到 帧 
GIF 动画 prac5-7. gif。 动 画 不 能 循环 播放 。 在 动画 中 加 入 作者 信息 :“ 作 者 : XX 班 X XX”。 

(1) 打开 本 地 站 点 images 目录 中 的 图 片 tp5-7. jpg。 

(2) 调整 背景 亮度 ,在 背景 图 片 下 方 加 入 作者 信息 :“ 作 者 : X X 班 XX X”, 设 置 “共享 
此 层 "。 参 照 5. 6. 8 小 节制 作 月 落 西 山 分 散 到 帧 GIF 动画 。 图 像 大 小 为 320 X240px, 循 环 
方式 使 用 “无 循环 ”。 

注意 : 在 最 后 一 帧 导入 图 片 tp5-7. jpg 后 ,还 需要 在 该 帧 中 加 入 作者 信息 :“ 作 者 : XX 
焉 XXX”。 

(3) 预览 效果 ,调整 帧 速 或 动画 帧 数 ,达到 满意 效果 为 止 。 

(4) 优化 设置 为 "GIF 动画 ”, 导 出 GIF 动画 到 本 地 站 点 images 目录 中 ,文件 名 使 月 
prac5-7. gif 。 

8.“ 作 品 欣赏 "网 页 pracs-1. html 制作 

(1) 在 Dreamweaver 中 打开 本 地 站 点 ,新 建 HTML 文档 ,另存 为 prac5-1. html。 

(2) 参照 5. 6. 9 小 节制 作 prac5-1. html 页 面 。 

(3) 在 本 地 站 点 预览 效果 。 

(4) 将 prac5-1. html 以 及 prac5-1. gif、prac5-2. jpg、prac5-3. jpg、prac5-4. jpg、 prac5-5. 
gif、prac5-6. gif、prac5-7. gif 文件 上 传 到 Web 服务 器 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 
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http://Web 服务 器 域名 地 址 /学 号 /prac5-1. html 


检查 网 页 发 布 是 否 正确 。 
(6) 保存 本 地 站 点 。 


实 训 任 务 5-8; 个 人 Logo 制作 


根据 自己 的 爱好 ,选择 自己 喜欢 的 图 形 ,制作 实 训 网 站 项 目 中 的 个 人 Logo 图 标 。 要 求 
个 人 Logo 能 够 体现 个 人 特点 ,美观 大 方 技术 含量 丰富 。 
参照 5. 7. 1 小 节制 作 个 人 Logo 图 标 。Logo 图 标 保存 为 logo. png( 备 用 )。 


实 训 任务 5-9; 栏目 首页 Banner 制作 


按照 教学 项 目 本 栏目 首页 中 的 Banner 设计 ,制作 实 训 网 站 项 目 中 自己 的 “个 人 网 站 ” 栏 
目 首页 Banner 图 像 。 

使 用 images 目录 中 的 素材 图 片 tp5-9. jpg 和 自己 的 照片 ,参照 5.7. 2 小 节 中 Banner 图 
像 的 设计 效果 (包括 大 小 、 内 容 、 效 果 ), 制 作 “ 个 人 网 站 ”栏目 首页 Banner 图 像 。 制 作 的 
Banner 图 像 导出 为 Banner. jpg( 备 用 ) 。 


实 训 任务 5-10; 网 站 首页 导航 按钮 制作 


使 用 Fireworks 按钮 制作 实 训 网 站 项 目 首页 中 的 导航 按钮 ,替换 网 站 首页 中 使 用 的 导 
航 按钮 。 

(1) 仿照 index. html 网 页 中 导航 按钮 的 样式 ,在 Fireworks 中 分 别 制作 5 个 按钮 导出 
到 buttons 文件 夹 中 。5 个 按钮 上 的 标题 文字 及 导出 的 文件 名 为 

我 的 大 学 : a-1. html 

我 的 家 乡 : a-2. html 

我 们 的 宿舍 : a-3. html 

我 的 主页 : a-4. html 

我 的 Flash: a-5. html 

在 导出 时 注意 选择 保存 在 本 地 站 点 buttons 文件 夹 中 ,导出 文件 名 的 扩展 名 使 用 . html。 
“导出 ”选择 “HTML 和 图 像 ”。 

(2) 在 Dreamweaver 中 打开 index. html 网 站 首页 文件 (注意 在 本 地 站 点 内 ) ,删除 原 页 
面 中 的 导航 按钮 ,使 用 “插入 ”1“ 图 像 对 象 ”| Fireworks HTML 命令 将 制作 的 5 个 按钮 插入 
到 网 页 的 原来 位 置 , 选 中 每 个 按钮 ,设置 超 链接 属性 。5 个 按钮 的 链接 如 下 : 

“我 的 大 学 ”按钮 链接 到 prac2. html 

“我 的 家 乡 ” 按 钮 链接 到 prac3. html 

“我 们 的 宿舍 ”按钮 链接 到 prac4. html 

“我 的 主页 ”按钮 链接 到 prac5. html 

“我 的 Flash” 按 钮 链接 到 prac6. html 

(3) 在 本 地 站 点 预览 效果 。 

(4) 将 index. html 以 及 buttons 文件 夹 上 传 到 Web 服务 器 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 
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http://Web 服务 器 域名 地 址 /学 号 


检查 网 站 首页 显示 是 否 正确 ,以 及 超 链接 是 否 正确 。 
(6) 保存 本 地 站 点 。 


实 训 任务 5-11: 个人 网 站 " 栏目 首页 制作 


使 用 自 备 图 片 ,按照 教学 项 目 中 “网 页 图 像 编辑 ”栏目 首页 的 设计 ,使 用 Fireworks 制作 
自己 的 “个 人 网 站 ”栏目 首页 。 训 练 使 用 Firework 制作 网 页 、 切 片 .切片 行为 .导出 切片 
技能 。 

(1) 在 本 地 站 点 内 新 建 一 个 slices 文件 夹 。 

(2) 自 备 6 张 自 己 及 同学 的 照片 存放 在 本 地 站 点 images 文件 夹 中 ,将 照片 大 小 修改 成 
453X 340px。 

(3) 仿照 5.7.5 小 节 栏 目 首页 设计 样式 ,制作 自己 的 个 人 网 站 首页 。 

(4) 对 网 页 切片 并 导出 网 页 文件 prac5. html。 注 意 将 切片 文件 存放 到 本 地 站 点 内 
slices 文件 夹 中 ,prac5. html 导出 到 本 地 站 点 根 目录 下 。 

(5) 在 本 地 站 点 预览 效果 ,检查 超 链接 是 否 正确 。 

(6) 将 prac5. html 以 及 slices 文件 夹 上 传 到 Web 服务 器 。 

(7) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 


检查 超 链接 是 否 正确 ,网 页 显示 是 否 正确 。 
(8) 保存 本 地 站 点 。 


岂 一 站 


Flash 网 页 动画 制作 


Flash 动画 是 网 页 中 最 具 活 力 的 部 分 ,适当 地 使 用 Flash 动画 可 以 使 页 面 生 动 活泼 。 
Flash 动画 还 可 以 直接 导出 为 HTML 文档 ,可 以 实现 与 Dreamweaver 的 无 缝 结合。 本 章 介 
绍 教学 项 目 网 站 中 的 Flash 动画 的 制作 以 及 使 用 Flash 制作 该 栏目 网 站 。 

6.1 “Flash 动画 ”栏目 设计 


该 栏目 设计 为 Flash 作品 网 站 。 栏 目 首页 prac6. html 内 容 与 效果 设计 如 图 6-1 所 示 。 


图 6-1 栏目 首页 内 容 与 效果 设计 


该 首页 为 一 个 800X600px 的 Flash 动画 ,其 中 包括 文字 形变 动画 和 一 个 小 船 在 江 中 的 
运动 动画 和 栏目 导航 按钮 。 

导航 按钮 “首页 ”链接 到 实 训 网 站 首页 index. html, “家乡 美 "“ 探 索 太 空 " 和 “思念 朋友 ” 
分 别 链接 到 3 个 Flash 动画 作品 网 页 prac6-1. html、prac6-2. html 和 prac6-3. html。 

“家 乡 美 "导航 按钮 链接 的 Flash 动画 作品 网 页 prac6-1. html 中 是 一 个 包含 3 幅 画 卷 ， 
大 小 为 800X 600px 的 Flash 遮 尝 动画 。 通 过 遮 日 动画 交替 展示 3 幅 画 卷 展开 和 卷 起 的 效 
果 , 如 图 6-2 所 示 。 动 画 下 面 的 “返回 ”按钮 用 于 返回 栏目 首页 。 

“探索 太空 ”导航 按钮 链接 的 Flash 动画 作品 网 页 prac6-2. html 中 是 一 个 动画 大 小 为 
800X600px 的 交互 式 多 场景 动画 ,其 中 第 一 场 为 “火箭 发 射 ”第 二 场 为 "飞船 飞行 ”两 个 场 
景 的 动画 如 图 6-3 所 示 。 
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图 6-2 交替 展示 3 幅 画 卷 展开 和 卷 起 的 效果 


(a) 火箭 发 射 (b) 飞船 飞行 
图 6-3 “探索 太空 ”两 个 场景 的 动画 


在 “火箭 发 射 "场景 中 , 单 击 “ 火 箭 发 射 "按钮 就 会 有 一 个 发 射 火箭 的 动画 ; 单 击 “ 飞 船 飞 
行 ”按钮 就 会 转 到 “飞船 飞行 ”场景 。“ 飞 船 飞行 ”场景 中 的 “返回 ”按钮 用 于 返回 “火箭 发 射 ” 
场景 ; “火箭 发 射 "场景 中 的 “结束 ”按钮 用 于 返回 栏目 首页 。 

“思念 朋友 ”导航 按钮 链接 的 Flash 动画 作品 网 页 prac6-3. html 是 一 个 综合 了 形变 动 
画 、 运 动 动画 、. 遗 单 动画 .影片 剪辑 和 声音 的 动画 ,图 6-4 是 其 中 的 一 个 动画 场面 ,详细 的 动 
画 效果 设计 可 参见 配套 教学 资源 或 浏览 http://www. tingdaily. com/flash/web 网 站 。 


图 6-4 “思念 朋友 ”中 的 一 个 动画 场面 
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该 动画 中 的 “返回 ”按钮 用 于 返回 栏目 首页 ,动画 大 小 为 800 X 600px。 
6.2 Flash 基础 


Flash 动画 是 使 用 网 页 制作 三 剑客 中 的 Flash 工具 软件 制作 的 二 维 动画 。Flash 动画 比 
GIF 动画 更 加 丰富 多 彩 、 生 动 活泼 、 允 真 ,二 维 动漫 中 大 多 都 是 Flash 动画 。 

制作 Flash 动画 使 用 的 Flash 工具 中 ,可 以 直接 使 用 该 工具 制作 出 Flash 动画 ,但 是 要 
制作 更 加 复杂 、 通 真 的 动画 需要 使 用 Flash 编程 脚本 语言 ActionScript。 本 教材 中 只 涉及 使 
用 Flash 工具 制作 动画 的 内 容 ,ActionScript 部 分 只 涉及 几 个 交互 控制 命令 。 

网 页 制作 三 剑客 被 Adobe 收购 后 ,Flash 的 版 本 也 修改 为 CS 版 ,在 Flash CS 版 本 中 除 
了 工作 界面 发 生 了 一 些 变 化 外 ,主要 增加 了 对 动漫 动画 的 支持 ,例如 增加 了 “骨骼 ”工具 , 通 
过 “骨架 ” 层 的 “搬入 姿态 ”使 得 人 物 ,动物 的 肢体 运动 形状 改变 更 加 容易 。 


6.2.1 Flash 工作 窗口 


图 6-5 是 中 文 Flash 8.0 的 工作 窗口 ,图 6-6 是 Flash CS4 的 工作 窗口 。 工 作 窗 口 主 要 
由 菜单 栏 .工具 箱 .舞台 、 时 间 轴 面板 .属性 面板 和 其 他 面板 组 构成 。CS 版 本 中 将 属性 面板 
放 人 了 面板 组 内 。 


工具 箱 2 i 板 当前 场景 选择 场景 ”编辑 元 件 缩放 比例 。 菜单 栏 
分 escrveedie Flash Prefessional 8 - [未 兮 各 -2#] 
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图 6-5 中文 Flash 8.0 的 工作 窗口 
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图 6-6 Flash CS4 的 工作 窗口 


1. 菜单 栏 

提供 各 种 菜单 操作 命令 。 

2. 工具 箱 

工具 箱 中 主要 是 绘图 工具 。 使 用 绘图 工具 时 ,图 形 的 笔触 颜色 和 填充 色 可 以 从 颜色 工 
具 箱 或 “属性 ”面板 中 选择 ,也 可 以 从 “ 混 色 器 ”面板 中 选择 。 

选中 一 个 绘图 工具 后 ,在 工具 箱 的 “选项 ”中 会 出 现 相应 的 选项 。 选 择 不 同 的 选项 ,工具 
将 具有 不 同 的 功能 。 

“查看 ”工具 箱 中 “ 手 形 工具 ”用 于 移动 舞台 在 窗口 中 的 位 置 ;“ 缩 放 工 具 ” 的 功能 和 使 用 
“缩放 比例 ”对 舞台 进行 缩放 的 功能 相同 。 在 放大 镜 图 形 中 显示 “十 ”时 ,在 舞台 中 单 击 可 以 
放大 舞台 及 舞台 中 的 对 象 ; 按 住 Alt 键 ,放大 镜 图 形 中 出 现 “ 一 ”, 在 舞台 中 单 击 可 以 缩小 舞 
台 及 舞台 中 的 对 象 。 

3. 舞台 

台 是 Flash 制作 动画 的 场所 。 和 舞台 的 大 小 就 是 动画 作品 在 网 页 中 的 大 小 。 

4. 属性 面板 

属性 面板 也 称 作 “属性 ”检查 器 。 当 选中 舞台 中 的 对 象 时 ,属性 面板 中 就 是 该 对 象 的 属 
性 。 通 过 属性 面板 可 以 设置 对 象 的 属性 。 在 CS 版 本 中 .属性 面板 在 活动 面板 组 中 。 

5. 滤 镜 面板 

使 用 滤 镜 可 以 为 文本 、Flash 按钮 和 影片 剪辑 添加 发 光 、 投 影 等 滤 镜 效果 。 
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6. 动作 面板 

动作 面板 用 于 对 动画 关键 帧 .按钮 以 及 影片 剪辑 元 件 实例 添加 动作 脚本 。 

7. 当前 场景 

用 于 指示 当前 编辑 的 场景 。 一 个 Flash 动画 可 以 由 多 个 场景 组 成 ,就 像 戏剧 是 由 多 个 
场次 组 成 的 一 样 。 不 同 场景 的 编辑 需要 选择 不 同 的 场景 。 选 择 场景 使 用 “选择 场景 "图 标 。 

8. 编辑 元 件 

对 舞台 中 的 元 件 进行 编辑 时 ,可 以 从 元 件 编辑 列表 中 选择 元 件 ,进入 元 件 编辑 状态 。 

9. 面板 组 

从 “窗口 "菜单 中 可 以 选择 打开 的 面板 。 


6.2.2 时 间 轴 面板 


Flash 动画 是 由 对 象 的 空间 结构 和 时 间 顺 序 组 成 的 。 时 间 轴 面板 是 创作 Flash 动画 的 
主要 工具 。 时 间 轴 面板 如 图 6-7 所 示 。 
显示 /隐藏 时 间 轴 显示 对 象 /显示 对 象 轮廓 


册 
锁定 /解除 锁定 图 层 
显示 /隐藏 图 层 当前 由 
插入 图 层 文件 夹 
添加 运动 引导 层 
插入 图 层 
6-7 ”时 间 轴 面板 


Flash 时 间 轴 面板 中 分 为 图 层 操作 区 和 帧 操作 区 。 图 层 反 映 运 动 对 象 的 空间 结构 ; 时 
间 轴 是 由 按时 间 顺 序 排列 的 帧 组 成 的 ,所 以 帧 操作 区 中 反映 运动 对 象 的 时 间 顺 序 。 

通过 “显示 /隐藏 时 间 轴 ”按钮 可 以 在 窗口 中 实现 时 间 轴 面板 的 显示 与 隐藏 。 

1. 图 层 操 作 

图 层 操 作 在 时 间 轴 面板 的 图 层 操作 区 进行 。 图 层 操作 包括 如 下 几 种 。 

(1) 插入 /删除 图 层 。 单 击 “ 插 入 图 层 ? 按 钮 可 以 在 当前 选中 图 层 的 上 面 插入 一 个 新 图 
层 。 插 入 一 个 新 图 层 后 ,系统 会 自动 为 新 图 层 命名 一 个 图 层 名 ,一般 为 图 层 1、 图 层 2…… 图 
层 的 前 后 排列 位 置 与 图 层 名 称 无 关 , 而 与 图 层 的 排列 顺序 有 关 。 在 图 层 操 作 区 中 拖 动 图 层 
的 上 下 位 置 可 以 改变 图 层 的 排列 顺序 。 

双击 图 层 名 后 ,可 以 修改 图 层 名 。 

使 用 “删除 图 层 ” 按 钮 图 标 可 以 删除 当前 选中 图 层 。 

(2) 添加 运动 引导 层 。 运 动 引导 层 是 用 于 轨迹 动画 的 引导 图 层 。 在 CS 版 本 中 ,引导 层 
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通过 层 属 性 设置 。 
(3) 插入 图 层 文 件 夹 。 当 一 个 动画 中 图 层 很 多 时 ,为 了 便于 管理 ,可 以 插入 图 层 文件 
夹 , 将 一 些 相关 图 层 放 入 一 个 图 层 文件 夹 中 。 
(4) 图 层 属性 。 设 置 图 层 属性 可 以 用 鼠标 双击 图 层 


的 “图 层 属性 ”图标 ,打开 * 图 层 属性 "对 话 框 ,如 图 68 所 gm 一 一 

示 。 在 “图 层 属性 ?对 话 框 中 可 以 设置 该 图 层 的 属性 。 Ps | 
(5) 编辑 图 层 。 当 选中 一 个 图 层 后 ,图 层 上 显示 出 nb 

铅笔 图 标 , 表示 该 层 处 于 编辑 状态 。 单 击 图 层 的 “ 锁 总 

定 /解除 锁定 ” 列 ,可 以 锁定 图 层 ,避免 被 无 意 破坏 。 单 人 

击 图 层 的 “显示 /隐藏 图 层 " 列 ,可 以 隐藏 图 层 的 内 容 。 | 是 

减少 对 编辑 图 层 的 影响 。 单 击 图 层 的 “显示 对 象 /显示 “| 硬 病 [am 习 


对 象 轮廓” 列 , 可 以 改变 该 层 对 象 的 显示 方式 ,以 便 其 
他 图 层 参 考 。 

如 果 单 击 图 层 操作 区 顶部 的 图 标 , 表 示 对 所 有 层 的 操作 。 例 如 , 单 击 图 层 操作 区 顶部 的 
“锁定 /解除 锁定 图标, 所 有 图 层 上 都 会 出 现 * 锁 图标, 即 所 有 图 层 都 不 能 编辑 。 如 果 设 置 
图 层 文件 夹 的 “锁定 ”“ 隐 藏 "“ 显 示 轮 廓 ”操作 , 则 该 图 层 文件 夹 内 的 所 有 图 层 都 受 影响 。 

2. 帧 操作 区 

帧 操作 区 中 是 动画 的 时 间 顺 序 排列 ,每 个 层 有 一 个 单独 的 时 间 通 道 。 时 间 通 道中 的 每 
个 格 表示 一 帧 。 舞 台中 的 显示 内 容 是 当前 帧 中 的 对 象 内 容 。“ 当 前 帧 ”和 ”播放 头 ” 的 位 置 是 
一 致 的 。 

“ 帧 频率 ”表示 动画 的 播放 速度 ( 帧 / 秒 ) ,动画 的 “运行 时 间 ” 与 “ 帧 频率 ”有 关 。 改 变 “ 帧 
频率 ”后 ,动画 的 “运行 时 间 ” 将 随 之 改变 。 

“洋葱 皮 ” 可 以 观察 多 帧 中 对 象 的 位 置 以 及 同时 编辑 多 帧 中 的 对 象 。 

3. 帧 类 型 

在 Flash 中 的 帧 有 以 下 4 种 类 型 。 

(1) 关键 帧 : 带 黑 点 的 帧 。 关 键 帧 是 动画 中 图 形 发 生 关键 性 变化 的 帧 ,也 是 动画 制作 
中 进行 编辑 操作 的 帧 。 动 画 制作 一 般 只 在 关键 帧 中 操作 ,其 他 帧 是 由 系统 自动 生成 的 。 


6-8 “图 层 属性 ”对 话 框 


i (2) 空白 关键 帧 : 带 白 圆圈 的 帧 。 空 白 关键 帧 是 帧 内 没有 对 象 
AR 的 关键 帧 空白 关键 帧 也 可 以 编辑 。 当 在 空白 关键 帧 中 放置 了 对 
Re 象 后 ,空白 关键 帧 就 变 成 了 关键 帧 。 
Asean (3) 静止 帧 ; 是 前 面 关键 帧 的 静止 延续 。 静 止 帧 的 结束 帧 是 带 
ee 白色 矩形 框 的 帧 。 

一 (4) 过 渡 帧 , 过 渡 帧 是 两 个 关键 帧 之 间 动 作 渐变 的 帧 。 过 渡 帧 
Ee 是 系统 自动 生成 的 ,所 以 不 能 编辑 过 渡 帧 。 通 过 插入 关键 帧 可 以 将 
wn 过 渡 帧 转变 为 关键 帧 。 正 确 的 过 渡 帧 是 带 箭头 的 实 线 , 虚 线 则 是 发 

= 生 了 错误 的 过 滤 帧 。 

LE 4. 帧 操作 
动作 


右 击 图 层 动画 通道 中 的 一 个 帧 位 置 ,弹出 “ 帧 操作 ”菜单 ,如 
6-9 “ 帧 操作 ”菜单 ”图 6-9 所 示 。 
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(1) 插入 帧 : 插入 静止 帧 的 结束 帧 ,即将 前 面 关键 帧 的 内 容 延 续 到 该 帧 。 

(2) 删除 帧 : 删除 当前 选中 的 所 有 帧 。 选 中 多 帧 时 需要 使 用 Shift 键 。 

(3) 插入 关键 帧 : 在 该 帧 位 置 插 入 一 个 关键 帧 。 插 入 关键 帧 后 ,前 一 个 关键 帧 中 的 对 
象 自动 复制 到 该 关键 帧 中 。 

(4) 插入 空白 关键 帧 : 在 该 帧 位 置 插 入 一 个 空白 关键 帧 。 插 和 空白 关键 帧 后 ,可 以 向 
该 帧 中 添加 对 象 或 添加 动作 脚本 。 

(5) 清除 关键 帧 : 将 关键 帧 转变 为 静止 帧 。 

其 他 的 帧 操作 读者 可 以 自己 体验 。 


6.2.3 Flash 文档 操作 


1. 新 建文 档 

从 Flash 起 始 页 的 “创建 新 项 目 ” 中 选择 *Flash 文档 ”, 或 者 选择 “文件 "|* 新 建 ” 命 令 , 打 
开 “ 新 建文 档 ” 对 话 框 ,从 “常规 ”选项 卡 中 选择 “Flash 文档 ”, 即 可 创建 一 个 新 的 Flash 文档 。 

2. 打开 文档 

从 Flash 起 始 页 的 “打开 最 近 项 目 ” 中 选择 一 个 Flash 文档 可 以 打开 该 文档 进行 编辑 。 
单 击 “ 打 开 最 近 项 目 ” 中 的 “打开 ”按钮 ,或 者 选择 “文件 ”1“ 打 开 ” 命 令 都 可 以 打开 “打开 ”文件 
对 话 框 ,从 中 可 以 选择 需要 打开 的 文档 。Flash 可 以 打开 的 源 代码 文档 为 .fla 文档。 可 以 使 
用 “文件 ”1“ 导 入 ”命令 导入 . swf 文档 ,但 导入 后 是 逐 帧 动画 。 


3. 文档 属性 
单 击 舞 台 空白 部 分 ,“ 属 性 ”检查 器 中 显示 文档 属性 。 文 档 “ 属 性 ”面板 如 图 6-10 所 示 。 
了 属性 
| 文档 大 小 ss0x400 信 来 | 青 景 站 M 虎 | 
未 命名 -2 发 布 ; 设置 … 播放 器 ; 8 Action5cript; 2 


| 5 
6-10 文档 “属性 ”面板 


在 文档 “属性 ”面板 可 以 设置 舞台 的 “大 小 ”“ 背 景 "颜色 ,修改 “ 帧 频 ”。 

4. 测试 动画 

Flash 动画 也 称 作 影片 。 动 画 制 作 好 后 使 用 Enter 键 可 以 对 影片 进行 测试 (预览 ) 。 测 
试 是 在 文档 中 进行 的 ,与 拖 动 播放 头 观 看 制作 效果 相同 。 

5. 导出 

使 用 “文件 ”1“ 导 出 ”1“ 导 出 影片 ”命令 ,可 以 导出 . swf 的 动画 文件 ; 如 果 使 用 “文件 ”| 
“导出 ”1“ 导 出 图 像 ” 命 令 , 只 能 导出 当前 帧 中 的 图 像 ,不 能 导出 影片 。 

6. 发 布 影片 

发 布 影片 是 将 动画 作品 发 布 到 网 页 中 ,一 般 可 以 生成 包含 动画 文档 的 HTML 文档 。 
发 布 的 HTML 文档 可 以 在 Dreamweaver 中 编辑 。 

(1) 发 布设 置 。 使 用 “文件 ”1 “发布 设置" 命令 可 以 打开 “发 布设 置 " 对 话 框 ,如 图 6-11 
所 示 。 
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Ea| 
EE 


| 


类 型 文件 : 
Wy mash (si) 慰 命名 -L_ swf [5 
FS mL (htnl) 00 际 寅 名 -1 htl @ 


厂 em 图 济 (6if)@) 民 S$5-Lest 四 
厂 Tec 图 你 (jp2 四 民 @5-Lipe 站 
厂 PNG 图 你 (pne) @E) 慰 $5-Lme 站 
厂 Windors 前 文件 【se 面 奈 富 s-iexe 癌 
厂 Macintosh 名 贞 文件 四) 蒜 Ss-iiw 加 
厂 QuickTine (nov)(Q) 奈 命 名 -1 mov [5 


使 用 默认 名 称 


图 6-11 “发 布设 置 ?对 话 杠 


在 “格式 ?选项 卡 中 ,可 以 设置 发 布 文档 的 “类 型 ”。 一 般 发 布 为 . swf 文档 和 . html 文 
档 。. swf 文件 较 小 ,适合 在 网 页 中 使 用 ,但 浏览 器 中 需要 安装 Flash 播放 器 。 如 果 发 布 为 
.exe 文档 , 则 动画 中 自 带 播放 器 ,但 文档 的 字 节 尺寸 将 增加 很 多 。 

在 “格式 ?选项 卡 中 还 可 以 设置 发 布 文件 的 名 称 和 位 置 , 单 击 相应 文件 名 称 框 后 面 的 文 
件 夹 图 标 ,可 以 通过 浏览 的 方式 设置 发 布 文件 的 名 称 和 位 置 。 

在 Flash 选项 卡 中 ,可 以 设置 播放 器 的 版 本 .ActionScript( 动 作 脚本 程序 ) 版 本 以 及 “ 防 
止 导入 ”等 。 在 选择 了 “防止 导入 ”后 ,需要 在 “密码 ” 框 中 设置 导入 密码 。 

在 HTML 选项 卡 中 ,可 以 设置 动画 的 大 小 、 播 放 方式 等 。 

(2) 影片 发 布 预览 。 影 片 发 布 预览 是 在 浏览 器 中 的 播放 预览 ,可 以 使 用 "文件 | 发布 
预览 ”命令 或 按 F12 键 。 

(3) 发 布 影片 。 在 “发 布设 置 " 对 话 框 中 单 击 “发 布 ”按钮 或 使 用 “文件 ”1“ 发 布 ”命令 ， 
可 以 按照 “发 布设 置 " 中 的 设置 内 容 发 布 影片 。 使 用 Ctrl 十 Enter 键 可 以 实现 发 布 预览 和 
发 布 。 

7. 保存 文档 

保存 文档 是 将 当前 编辑 文档 保存 为 . fla 文档 ,以 后 还 可 以 使 用 Flash 打开 编辑 。 


6.3 Flash 工具 箱 


Flash 工具 箱 中 主要 是 绘图 工具 ,用 于 绘制 失 量 图 形 。 在 Flash 中 可 以 使 用 位 图 ,例如 
动画 背景 .动画 元 件 ,位 图 填充 等 ,但 不 能 使 用 绘图 工具 对 位 图 进行 加 工 。 
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6.3.1 颜色 选择 


使 用 绘图 工具 绘制 图 形 时 ,首先 需要 选择 笔触 与 填充 的 颜色 。 颜 色 选择 可 以 在 工具 箱 
的 “笔触 色 ”“ 填 充 色 ”中 选择 ,也 可 以 在 “ 混 色 器 "(CS 版 本 中 为 “颜色 ”) 面 板 中 选择 。 

选择 颜色 可 以 在 颜色 样板 中 ( 见 图 6-12(a)) 选 择 。 如 果 需 要 编辑 渐变 色 , 则 需要 使 
“ 混 色 器 ?面板 ( 见 图 6-12(b) ) ,编辑 方法 与 在 Fireworks 中 类 似 。 


上 aaa 


下 一 -填充 类 型 


| | 
| Ey 


纯色 透明 色 编辑 
(a) (b) 


图 6-12 颜色 样板 与 “ 混 色 器 ”面板 


Flash 的 颜色 填充 类 型 有 纯色 、 线 性、 放射 状 和 位 图 4 种。 使 用 位 图 填充 时 ,需要 打开 
一 个 位 图 文件 ,使 用 方法 与 Fireworks 中 类 似 。 


6.3.2 图 形 工 具 


1. 直线 工具 
直线 工具 可 以 绘制 直线 。 直 线 工具 “属性 ”面板 如 图 6-13 所 示 。 


广 广 广 三 广 


动作 
3 
7 总 用 [| 一 可 上 EX | 日 
式 厂 人 半 提示 。。 绝 让 :三原 ” ”| 尖 角 : 记 ” ”接合 : 会 


(b) 
图 6-13 ”直线 工具 “属性 ”面板 和 各 种 “端点 ”"“ 接 合 ”样式 的 图 形 


在 直线 工具 “属性 ?面板 中 可 以 设置 笔触 的 颜色 粗细、 直线 类 型 ,还 可 以 设置 直线 端点 
的 类 型 ( 圆 角 方形) 和 直线 接合 的 类 型 ( 尖 角 、 圆 角 、 斜 角 )。 图 6-13(a) 是 各 种 端点 和 接合 的 
图 形 实例 。 

单 击 直线 工具 “属性 ”面板 中 的 “ 自 定义 ”按钮 (CS 版 本 中 为 铅笔 按钮 ) ,可 以 打开 “笔触 样 
式 ” 对 话 框 ,如 图 6-14 所 示 ,在 其 "类 型 ? 框 中 可 以 选择 一 些 笔触 类 型 ,还 可 以 设置 笔触 的 参数 。 
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图 6-14 “笔触 样式 ”对 话 框 


使 用 直线 工具 绘制 45" 斜 线 需要 按 住 Shift 键 。 

2. 椭圆 工具 

椭圆 工具 用 于 绘制 椭圆 和 圆 形 图 形 。 选 中 椭圆 工具 后 ,可 以 在 “颜色 ”面板 中 设置 笔触 
和 填充 颜色 。 笔 触 和 填充 颜色 都 可 以 是 透明 色 纯色 或 渐变 色 。 

使 用 椭圆 工具 绘制 圆 形 需 要 附加 Shift 键 ,从 中 心 展开 需要 附加 Alt 键 。 如 果 绘制 的 图 
形 中 笔触 和 填充 都 不 是 透明 色 , 一 次 绘制 将 得 到 两 个 对 象 : 椭圆 边线 路 径 对 象 和 椭圆 填充 
对 象 。 

3. 矩形 工具 

矩形 工具 用 于 绘制 矩形 图 形 。 绘 制 正方 形 要 附加 Shift 键 ,从 中 心 展开 需要 附加 Alt 
键 ,其 他 与 椭圆 工具 相同 。 

绘制 圆 角 矩 形 通过 工具 箱 * 选 项 ?中 的 “ 边 角 半 径 设置 ?完成 (CS 版 本 在 属性 面板 中 ) ,如 
图 6-15(a) 所 示 。 单 击 “ 边 角 半 径 设 置 ?图 标 打 开 * 和 矩形 设置 ”对 话 框 ,如 图 6-15(b) 所 示 ,在 
其 中 可 以 设置 圆 角 半 径 。 

选择 矩形 工具 组 的 “多 边 形 ?工具 时 ,可 以 绘制 多 边 形 图 形 , 同 时 “属性 ?面板 中 会 出 现 
“选项 ”按钮 。 单 击 “ 选 项 ”按钮 打开 “工具 设置 "对 话 框 ,如 图 6-16 所 示 。 在 “工具 设置 ?对 话 
框 中 ,“ 样 式 ” 可 以 选择 “多 边 形 " 和 *“ 星 形 ”, 还 可 以 设置 “ 边 数 "和 “ 星 形 顶 点 大 小 ”。 绘 制 五 角 
星 时 星 形 顶点 大 小 为 0.5 时 正 合 适 。 


对 象 给 制 -- 回 | 风 | 紧 上 友 对 象 。 “于 | 
边 角 半 径 设置 - 诺 | 
(a) (b) 
图 6-15 “选项 "中 的 * 边 角 半 径 设置 ?和 *“ 和 矩形 设置 "对 话 杠 图 6-16 “工具 设置 "对 话 框 
6.3.3 选取 工具 
1. 选择 工具 


选择 工具 是 实心 箭头 工具 。 选 择 工具 可 以 通过 单 击 对 象 方式 选择 某 个 对 象 。 
当选 择 工 具 鼠 标 旁 边 为 矩形 框 时 ,可 以 进行 区 域 对 象 选 择 , 即 可 以 拉 出 一 个 矩形 区 域 ， 
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该 矩形 区 域 中 的 对 象 都 被 选中 。 
当选 择 工 具 鼠 标 旁 边 为 十” 字 箭 头 时 ,可 以 移动 选中 的 对 象 。 
当选 择 工 具 鼠 标 旁 边 为 弧 形 曲线 时 ,使 用 鼠标 可 以 移动 对 象 的 外 缘 , 改 变 对 象 的 


形状 。 
过 机 当选 择 工具 鼠标 旁边 为 直角 形状 时 ,使 用 鼠标 可 以 移动 对 
关 轴 | 。。 象 的 拐角 点 ,改变 对 象 的 形状 。 
下 滑 一 证 2 一作 直 如 果 使 用 选择 工具 选中 一 段 线段 ,可 以 使 用 工具 箱 “ 选 项 ” 


图 6-17 “平滑 "“ 伸 直 * 按 钮 中 “平滑 ”“ 伸 直 ” 按 钮 对 线段 进行 加 工 。“ 平 滑 ”“ 伸 直 ” 按 钮 
如 图 6-17 所 示 , 每 单 击 一 次 图 标 ,选中 线段 的 外 形 就 会 有 所 

2. 部 分 选取 工具 

部 分 选取 工具 是 空心 箭头 工具 。 使 用 部 分 选取 工具 可 以 单 击 对 象 的 边缘 选中 对 象 ,或 
拉 出 一 个 矩形 ,选中 矩形 区 域内 的 所 有 对 象 。 

部 分 选取 工具 选中 一 个 对 象 后 ,对 象 边缘 上 出 现 控制 点 ,鼠标 变 成 “No ”时 ,可 以 拖 动 对 
象 边缘 控制 点 改变 对 象形 状 。 当 鼠标 成 为 空心 三 角形 状 时 可 以 拖 动 控制 点 的 调整 手柄 改变 
对 象 的 边缘 曲率 。 

3. 套 索 工具 

套 索 工具 用 于 在 图 形 内 部 选取 部 分 区 域 。 使 用 套 索 工具 在 对 象 内 部 绘制 一 个 闭合 的 区 
域 后 ,可 以 对 该 区 域 进 行 填充 移动 .复制 (附加 Ctrl 键 ) ,删除 (Del 键 ) 等 操作 。 

选中 套 索 工具 后 ,工具 箱 “ 选 项 "中 有 3 个 套 索 工具 选项 ,如 图 6-18(a) 所 示 。“ 魔 术 棒 设 
置 ?对 话 框 如 图 6-18(b) 所 示 。 


选项 
魔术 棒 一 SS SN 二 麻 术 棒 设 置 
多 边 形 一 办 | 


(a) 
6-18 ” 套 索 工具 箱 “ 选 项 "和 “魔术 棒 设 置 ”对 话 框 


魔术 棒 只 在 分 离 的 位 图 中 按 颜色 选择 区 域 ,在 “魔术 棒 设 置 ? 对 话 框 中 可 以 设置 颜色 的 
“ 阔 值 "( 即 容 差 )。 使 用 "多边 形 套 索 ?选项 可 以 绘制 多 边 形 的 选取 区 域 。 


6.3.4 ”颜色 填充 工具 


1. 颜料 桶 工具 

颜料 桶 工具 可 以 使 用 选择 的 填充 颜色 对 选中 区 域 进 行 颜 a is 
色 填 充 。 使 用 颜料 桶 工具 要 注意 设置 工具 箱 中 的 “选项 ”。 选 和 加 全 
中 颜料 桶 工具 后 工具 箱 中 的 “选项 ”, 如 图 6-19 所 示 。 “© | sna 

一 般 填 充 是 对 封闭 区 域 的 填充 , 当 区 域 中 有 缝隙 时 ,填充 息 引 间 9 等 s 阳 
则 不 能 完成 。 选 择 填充 选项 中 的 适当 “空隙 ”, 可 以 对 不 完全 封 2 


闭 的 图 形 进行 填充 “不 封闭 空 阶 " 是 指 完全 封闭 的 区 域 。 辣 和 二 总 0 
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2. 墨水 瓶 工具 


墨水 瓶 工具 是 对 笔触 进行 颜色 填充 的 工具 。 使 用 墨水 瓶 工 具 可 以 改变 对 象 的 笔触 颜 
色 。 如 果 一 个 对 象 的 笔触 是 透明 色 ,可 以 使 用 墨水 瓶 工 具 为 其 添加 笔触 颜色 。 
3. 吸管 工具 


吸管 工具 用 于 选取 笔触 或 填充 色 。 使 用 吸管 工具 可 以 从 颜色 样板 或 图 像 中 获取 纯色 、 
渐变 色 以 及 填充 位 图 。 
6.3.5 变形 工具 


1. 任意 变形 工具 
任意 变形 工具 可 以 对 图 形 对 象 进行 任意 变形 操作 。 选 中 任意 变形 工具 后 ,“ 选 项 ”中 有 
“缩放 ”“ 旋 转 与 倾斜 "“ 扭 曲 ” 和 “封套 ”选项 ,如 图 6-20(a) 所 示 。 选 择 “ 封 套 ” 选 项 时 ,被 纺 
辑 对 象 周围 出 现 控 制 点 , 拖 动 这 些 控 制 点 可 以 编辑 对 象 的 形状 ,如 图 6-20(b) 所 示 。 
上 
[A] 
旋转 与 倾斜 一 克 加 本- 缩放 
扭曲 一 四 网 二 封套 


(a) 
图 6-20 任意 变形 工具 的 “选项 "和 “封套 "编辑 


2. 填充 变形 工具 

填充 变形 工具 用 于 调整 线性 填充 和 放射 状 填充 以 及 位 图 填充 的 填充 效果 。 选 取 填 充 变 
形 工 具 后 ,选中 对 象 上 出 现 填 充 变 形 调整 手柄 ,如 图 6-21 所 示 。 调 整 相应 手柄 可 以 调整 填 
充 效果 。 位 图 填充 变形 调整 手柄 如 图 6-22 所 示 。 


填充 中 心 ”填充 方向 
调整 手柄 ”调整 手柄 


填充 中 心 调整 手柄 
《 一 填充 范围 一 填充 纵横 比 调整 手柄 
调整 手柄 一 填充 范围 调整 手柄 


一 填充 方向 调整 手柄 


线性 填充 调整 放射 状 填充 调整 
6-21 填充 变形 调整 


一 填充 方向 调整 手柄 
Sh 司 填充 中 心 调整 手柄 


横向 填充 调整 手柄 时 内 一 横向 担 曲 调整 手柄 


多 
Ne 二 
9 纵向 填充 调整 手柄 


图 6-22 位 图 填充 变形 调整 


纵向 扭曲 调整 手柄 


填充 范围 调整 手柄 
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6.3.6 笔 形 工具 


1. 铅笔 工具 
铅笔 工具 和 直线 工具 的 属性 是 相同 的 ,但 铅笔 工具 的 “选项 ”中 * 伸 直 "“ 平 滑 ” 和 “墨水 ” 
3 个 选项 如 图 6-23 所 示 。 使 用 相应 的 选项 可 以 绘制 直线 ,平滑 的 曲线 和 任意 曲线 。 


2. 钢笔 工具 
钢笔 工具 是 用 于 绘制 贝 塞 尔 曲线 的 工具 ,和 Fireworks 中 的 类 似 。 
3. 刷子 工具 


刷子 工具 只 能 绘制 填充 色 块 。 在 刷子 工具 的 “选项 ”中 有 ”刷子 大 小 *“ 刷 子 形状 "的 选 
择 以 及 “绘画 类 型 "的 选择 ,如 图 6-24(a) 所 示 。“ 绘 图 类 型 ”的 选项 如 图 6-24(b) 所 示 。 


“| 日 | HE 面 
选项 
所 
0 全 
5 和 刷子 形状 wna 
了 人 | xk 
图 6-23 铅笔 工具 中 的 “选项 ” 图 6-24 刷子 工具 中 的 “选项 ”与 “绘图 类 型 ” 


使 用 刷子 在 图 像 上 绘画 时 ,选择 “绘图 类 型 ”可 以 做 到 如 下 几 点 。 
(1)“ 标 准 绘画 ”: 可 以 改变 原来 的 边线 与 填充 部 分 颜色 。 

(2)“ 颜 料 填充 ”: 只 能 改变 填充 颜色 ,不 能 改变 边线 的 颜色 。 
(3)“ 后 面 绘画 ”: 在 图 像 上 面 不 能 绘画 。 

(4)“ 颜 料 选择 ”: 只 能 在 选中 的 对 象 或 区 域 中 绘画 。 

(5)“ 内 部 绘画 ”: 只 能 改变 开始 接触 的 颜色 块 的 颜色 。 


6.3.7 橡皮 控 工 具 


使 用 橡皮 擦 工 具 时 ,可 以 从 “选项 ”中 选择 橡皮 擦 的 大 小 与 形状 ; 如 果 选 择 “ 水 龙头 ” 选 
项 , 则 可 以 一 次 擦 除 整个 封闭 区 域 。 橡 皮 擦 工具 的 “选项 ”如 图 6-25(a) 所 示 ,“ 擦 除 类 型 "中 
包含 的 类 型 如 图 6-25(b) 所 示 。 


"|S | 5 
© me 
选项 © Ws 
擦 除 类 型 一 鲤 冯 一 水 龙头 生 it 
大 小 与 形状 一 加 © Ns 


(a) (b) 
图 6-25 ”橡皮 擦 工具 的 “选项 "和 “ 擦 除 类 型 ” 


选择 不 同 的 “ 擦 除 类 型 ”可 以 完成 的 功能 如 下 。 
(1)“ 标 准 擦 除 ”: 可 以 擦 除 所 有 对 象 。 
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(2)“ 擦 除 填 色 ”: 只 能 擦 除 填充 色 ,不 能 擦 除 边 线 。 
(3)“ 擦 除 线条 ”: 只 能 擦 除 边线 ,不 能 擦 除 填充 色 。 
(4)“ 擦 除 所 选 填充 ”: 只 能 擦 除 选择 区 域 的 填充 颜色 。 
(5)“ 内 部 擦 除 ”: 只 能 擦 除 起 始 接 触 的 颜色 。 


6.3.8 文本 工具 


使 用 Flash 文本 工具 可 以 在 Flash 文档 中 输入 文字 。Flash 文档 中 的 文字 可 以 使 用 任 
意 变形 工具 进行 “缩放 ”和 “旋转 ”操作 ,但 不 能 “扭曲 ”“ 倾 斜 ”, 也 不 能 填充 渐变 颜色 ,因为 文 
本 不 是 矢量 图 形 。 

文本 可 以 转变 为 矢量 图 形 ,选中 文本 ,使 用 "修改 "| 分离” 命令 可 以 将 文字 转换 为 矢量 
图 形 。 


6.4 Flash 动画 种 类 


6.4.1 逐 帧 动画 


逐 帧 动画 就 是 将 动画 内 容 逐 帧 地 放置 ,每 一 帧 都 是 关键 帧 。 逐 帧 动画 只 适应 动画 内 容 
比较 少 的 动画 。 


6.4.2 形变 动画 


1. 普通 形变 动画 

形变 动画 是 图 形 的 形状 变化 .颜色 改变 .位 置 移动 的 动画 。 形 变动 画 的 内 容 必须 是 矢量 
的 图 形 ,如 果 使 用 文字 ,需要 将 文字 分 离 成 矢量 图 形 。 

形变 动画 是 处 于 同一 图 层 上 的 两 个 关键 帧 之 间 图 形 的 变化 。 如 果 两 个 关键 帧 上 的 图 形 
个 数 不 同 ,形变 动画 就 会 发 生 图 形 的 合并 或 拆 分 。 如 果 需 要 制作 多 个 图 形 有 相互 对 应 变化 
关系 的 形变 动画 ,或 者 需要 分 时 变化 的 形变 动画 ,为 了 避免 相互 干扰 ,可 以 分 层 制作 。 

形变 动画 的 制作 方法 如 下 : 

(1) 新 建文 档 , 选 择 舞 台大 小 、 背 景色 。 

(2) 选中 空白 关键 帧 ,在 该 关键 帧 中 放置 一 个 矢量 图 形 。 

(3) 在 该 关键 帧 的 后 面 同 一 图 层 上 插入 一 个 空白 关键 帧 ,在 新 插入 的 空白 关键 帧 中 放 
置 另 一 个 矢量 图 形 。 

(4) 选择 第 1 个 关键 帧 ,在 “属性 ?面板 的 “ 补 间 ?列表 中 选择 “形状 (在 CS 版 本 中 , 右 击 
两 个 关键 帧 之 间 的 某 一 帧 ,在 弹出 菜单 中 选择 “创建 补 间 形 状 " 命 令 制作 形变 动画 ) 。 该 过 程 
以 后 经 常 简称 为 “创建 形变 动画 ”。 

例如 ,制作 一 个 “再 见 ” 变 形 为 “Bye-Bye” 的 动画 ,要 求 “ 再 ” 字 变 为 “Bye-” 后 ,“ 见 ” 字 再 开 

制作 步骤 如 下 

(1) 新 建 Flash 文档 ,舞台 大 小 为 360X200px, 舞 台 背 景 为 白色 。 
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(2) 选择 图 层 1 的 第 1 帧 ,选择 “文本 工具 ”, 填 充 色 选择 红色 ,字体 选择 隶书 ,文字 大 小 
选择 96px, 在 靠 舞 台 左 侧 书写 “再 ” 字 。 

(3) 选中 “再 ”文本 ,选择 “修改 ”|“ 分 离 ” 命 令 。 

(4) 选择 图 层 1 的 第 30 帧 ,插入 空白 关键 帧 。 

(5) 选择 “文本 工具 ”, 在 文字 “再 ”的 位 置 书写 绿色 .80px 大 小 、Arial 字体 的 “Bye-” 
文本 。 

(6) 选中 “Bye-” 文 本 ,使 用 两 次 “修改 ”1“ 分 离 ” 命 令 。 

(7) 选择 图 层 1 的 第 1 帧 ,在 “属性 ”面板 的 * 补 间 ” 列 表 中 选择 “形状 ”。 

(8) 选择 图 层 1 的 第 70 帧 ,插入 静止 帧 。 


(9) 在 层 操作 区 插入 图 层 2。 
(10) 选择 图 层 2 的 第 1 帧 ,选择 “文本 工具 ”, 填 充 色 选择 红色 ,字体 选择 隶书 ,文字 大 


小 选择 96px, 在 舞台 右 侧 书写 “ 见 ” 字 。 选 中 “ 见 ” 字 ,选择 “修改 ”|“ 分 离 ” 命 令 。 

(11) 选择 图 层 2 的 第 31 帧 ,插入 关键 帧 。 

(12) 选择 图 层 2 的 第 60 帧 ,插入 空白 关键 帧 。 

(13) 选择 “文本 工具 ”, 在 文字 “ 见 ” 的 位 置 书写 绿色 、80px 大 小 、Arial 字体 的 “Bye” 文 
本 ,并 对 “Bye” 使 用 两 次 “修改 ”|“ 分 离 ” 命 令 。 

(14) 选择 图 层 2 的 第 31 帧 ,在 “属性 ”面板 的 * 补 间 ” 列 表 中 选择 “形状 ”。 

(15) 选择 图 层 2 的 第 70 帧 ,插入 静止 帧 。 

时 间 轴 面板 设置 如 图 6-26 所 示 。 


下 | 
IE [加 向 mm 
全 BDIs5 10 15 20 225)as 40 45 50 55 60 65 70 


已 国明 1 二- 一 一 | 
| 加 3 [12.0 gps | 2.55 4] 加 | 


Bye- 见 


图 6-26 形变 动画 时 间 轴 面板 设置 
2. 干涉 形变 动画 
干涉 形变 动画 是 形变 动画 中 的 高 级 动画 。 在 形变 动画 中 ,图 形 之 间 变 化 是 无 规律 的 ,如 
果 和 希望 人 工 干预 , 则 需要 使 用 干涉 动画 。 干 涉 形变 动画 就 是 在 图 形 上 添加 若干 指示 点 ,指示 
图 形 之 间 的 对 应 变化 关系 。 
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例如 ,制作 一 个 翻 页 效果 的 动画 。 

绘制 两 个 横向 并 排放 置 的 线性 填充 矩形 块 ,改变 第 2 个 矩形 块 的 填充 方向 ,使 其 和 第 1 
个 矩形 块 成 填充 色 对 称 效 果 , 如 图 6-27 所 示 。 

如 果 制 作 两 个 矩形 的 形变 动画 ,不 会 出 现 将 第 1 个 矩形 翻 到 第 2 个 矩形 块 上 的 效果 ,所 
以 需要 使 用 干涉 形变 动画 。 

制作 步骤 如 下 : 

(1) 新 建 Flash 文档 ,舞台 大 小 为 400X200px, 舞 台 背 景 为 白色 。 

(2) 在 图 层 第 1 帧 绘制 无 笔触 色 、 线 性 填充 矩形 。 

(3) 在 图 层 第 20 帧 插入 空白 关键 帧 ,绘制 无 笔触 色 .线性 填充 矩形 。 使 用 填充 变形 工 
具 将 矩形 的 填充 方向 转动 180 。 

(4) 选中 图 层 第 1 帧 ,在 “属性 ”面板 的 “ 补 间 ” 列 表 中 选择 “形状 ”, 完 成 形变 动画 制作 。 
在 第 30 帧 插入 静止 帧 。 

(5) 选中 图 层 第 1 帧 ,使 用 Ctrl 十 Shift 十 H 键 ,在 矩形 上 添加 形状 提示 点 a、b、c、d( 一 次 
产生 一 个 形状 提示 点 ) ,将 4 个 形状 提示 点 拖 放 到 4 个 角 ( 或 4 个 边 上 )。 选 中 图 层 第 20 帧 ， 
矩形 上 已 经 有 a、b、c、d 形状 提示 点 ,将 它们 拖 放 到 对 应 角 ( 或 对 应 边 上 ) ,注意 和 第 1 个 矩形 
的 对 应 关系 。 图 6-28 是 形状 提示 点 的 一 种 排列 及 对 应 关系 示例 。 添 加 了 指示 点 之 后 ,动画 
就 会 出 现 翻 页 效果 。 


@ 


© 
图 6-27 ”对 称 线性 填充 效果 的 矩形 色 块 图 6-28 形状 提示 点 排列 及 对 应 关系 


6.4.3 运动 动画 


运动 动画 是 指 元 件 的 移动 动画 。 在 形变 动画 中 ,形变 对 象 也 可 以 移动 位 置 ,但 由 于 动作 
对 象 不 是 元 件 , 所 以 不 是 运动 动画 。 在 运动 动画 中 ,元 件 可 以 发 生 位 置 .大 小 .颜色 的 变化 ， 
但 不 能 改变 外 部 形状 。 在 制作 运动 动画 时 ,要 特别 注意 每 个 图 层 上 同一 时 刻 只 能 有 一 个 
元 件 。 

运动 动画 中 的 元 件 可 以 是 图 形 元 件 , 也 可 以 是 影片 剪辑 元 件 。 影 片 剪辑 元 件 可 以 在 “ 滤 
镜 ” 面 板 中 添加 滤 镜 效果 。 

1. 元 件 的 制作 

Flash 中 的 元 件 是 指 创 建 一 次 即 可 多 次 重复 使 用 的 图 形 、 按 钮 或 影片 剪辑 。 在 Flash 
代码 中 ,元 件 是 用 标识 符 表示 的 ,这 样 可 以 大 量 降低 动画 文档 的 字 节 尺寸 ,节约 文档 下 载 
时 间 。 

元 件 的 制作 方法 如 下 : 

(1) 创建 新 元 件 。“ 库 ”面板 如 图 6-29 所 示 。 单 击 “ 新 建 元 件 ” 按 钮 打开 “创建 新 元 件 ” 
对 话 框 ,如 图 6-30 所 示 。 
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i 
[ET S| 贡 鳃 
库 中 的 一 项 
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名 称 类 型 _ 三 
外 袖 1_ 蔚 瑟 
新 建 元 件 和 到 
新 建文 件 夹 
元 件 属性 


0 Tj/ | 型 _ 
图 6-29 “ 库 ? 面 板 图 6-30 “创建 新 元 件 ” 对 话 框 


在 “创建 新 元 件 ” 对 话 框 中 输入 元 件 的 名 称 , 选 择 元 件 的 类 型 , 单 击 “ 确 定 ” 按 钮 ,打开 元 
件 的 编辑 窗口 如 图 6-31 所 示 。 


Ee 


6-31 元 件 编辑 窗口 


在 元 件 编辑 窗口 中 进行 元 件 的 制作 。 图 形 元 件 可 以 是 矢量 图 形 ,可 以 是 文字 ,可 以 是 位 
图 图 像 。 对 于 影片 剪辑 ,可 以 制作 成 一 个 动画 。 元 件 制作 完成 后 , 单 击 “ 场 景 "(图 6-31 中 为 
场景 1) ,结束 元 件 制 作 ,元 件 进 入 “ 库 ” 面 板 的 元 件 列表 中 。 

在 制作 元 件 时 ,如 果 在 “创建 新 元 件 ” 对 话 框 中 没有 输入 元 件 名 称 , 系 统 会 自动 为 元 件 命 
名 “元 件 1”“ 元 件 2”、…… 在 一 个 动画 文件 中 这 种 命名 方式 没有 什么 问题 ,但 在 使 用 其 他 
Flash 文档 中 的 元 件 时 (使 用 “导入 ”1“ 打 开外 部 库 ” 命 令 可 以 导入 其 他 Flash 文档 中 的 元 件 ) 
就 会 发 生 * 元 件 冲突 ?问题 ,所 以 应 该 养 成 自己 命名 元 件 名 称 的 习惯 。 

(2) 将 图 形 转换 为 元 件 。 在 舞台 中 绘制 好 图 形 后 ,选中 图 形 ,使 用 "修改 "|* 转 换 为 元 
件 ” 命 令 ,或 直接 按 F8 键 打开 “转换 为 元 件 对 话 框 (与 图 6-30 类 似 ) ,在 其 中 填写 元 件 名 称 、 
选择 元 件 类 别 , 单 击 “确定 ”按钮 ,图 形 被 转换 为 元 件 ,进入 “ 库 "” 面 板 的 元 件 列 表 中 ,同时 舞台 
上 的 图 形 已 经 转换 成 了 元 件 实例 。 

2. 编辑 “ 库 ” 面 板 中 的 元 件 

如 果 需 要 编辑 * 库 ?面板 列表 中 的 元 件 , 可 以 双击 元 件 的 图 标 打开 元 件 编辑 窗口 ,在 元 件 
编辑 窗口 中 对 元 件 进行 编辑 , 单 击 “ 场 景 "按钮 结束 元 件 编辑 。 
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3. 元 件 实例 属性 

舞台 中 的 元 件 为 元 件 实例 ,一 个 元 件 可 以 有 多 个 元 件 实例 ,每 个 元 件 实例 都 各 有 独立 于 
该 元 件 的 属性 。 可 以 更 改元 件 实例 的 色调 、 透 明度 和 亮度 ; 也 可 以 倾斜 .旋转 或 缩放 元 件 实 
例 , 这 并 不 会 影响 元 件 。 

(1) 更 改元 件 实例 的 色调 、 透 明度 和 亮度 。 选 中 舞台 中 的 元 件 实例 后 ,在 “属性 ”面板 的 
“颜色 ”列表 框 内 有 “亮度 ”“ 色 调 ”Alpha、“ 高 级 ”选项 (CS 版 本 中 为 “色彩 效果 ”|* 样 式 ”) 。 
选择 “亮度 ”时 ,“ 属 性 ”面板 中 的 亮度 设置 如 图 6-32(a) 所 示 ; 选择 “色调 ”时 ,“ 属 性 ”面板 中 
的 色调 设置 如 图 6-32(b) 所 示 , 可 以 在 颜色 样板 中 选择 元 件 实例 颜色 ,可 以 调整 红 \ 绿 、 蓝 颜 
色 值 以 调整 元 件 实例 颜色 ,还 可 以 通过 调整 色彩 数量 来 调整 颜色 ; 选择 Alpha 时 ,“ 属 性 ” 面 
板 中 的 元 件 实例 不 透明 度 设置 如 图 6-32(c) 所 示 ; 选择 “高 级 "时 ,“ 属 性 ”面板 中 出 现 “ 设 置 ” 
按钮 ,如 图 6-32(d) 所 示 , 单 击 * 设 置 "按钮 打开 * 高 级 效果 ?对 话 框 , 如 图 6-32(e) 所 示 。 在 
“高 级 效果 ”对 话 框 中 可 以 通过 调整 红 、 绿 、 蓝 颜色 的 成 分 及 偏 移 量 调整 元 件 实 例 颜色 ,通过 
Alpha 项 调整 元 件 实例 的 不 透明 度 。 


实例 颜色 色彩 数量 红 =( 克 画 -| x+P | 


四 le [e 可 Wr 扩 =(hom | x+ | 
mp dF dh | 昔 =(]oo% 引 xB)+ p 可 
红 绿 蓝 Apha=( om 可 Wap 


(9 | me rR 本 
实例 不 透明 度 
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图 6-32 元 件 实例 的 颜色 设置 


(2) 倾斜 ,旋转 或 缩放 元 件 实 例 。 选 中 元 件 实例 后 ,选择 任意 变形 工具 ,通过 调整 手柄 
可 以 对 元 件 实例 进行 倾斜 旋转 或 缩放 操作 。 也 可 以 使 用 “修改 ”1“ 变 形 ” 命 令 , 打 开 “ 变 形 ” 
菜单 ,如 图 6-33(a) 所 示 ,选择 其 中 的 选项 ,通过 对 话 方式 确定 元 件 实例 变形 参数 。 也 可 以 使 
用 “窗口 "1 “变形 ”命令 ,打开 “变形 ”面板 ,如 图 6-33(b) 所 示 , 通 过 设置 窗口 中 的 相关 参数 实 
现 元 件 实例 的 倾斜 .旋转 或 缩放 。 


v 任意 变形 @) | 
dy 和 vv 对 并 A 信息 & 变 形 去 
和 
缩放 G) 
旋转 与 倾斜 级 ) 如 |100.0% $100.0% 厂 约束 

和 G2[ 0 
顺 时 针 族 转 90 度 {0) CtrltShiftt9 
这 时 针 旋 转 90 度 @) CtrltshifttT C 全 到 三 5 并 50 
委 直 刘 转 0) 

A 
职 消 变形 上) Ctrltshifttz 水 平 倾斜 垂直 倾斜 


(a) (b) 
图 6-33 “变形 ”菜单 和 “变形 "面板 
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4. 交换 元 件 

在 动画 制作 完成 后 ,如 果 需 要 把 其 中 的 元 件 实例 更 换 成 其 他 的 元 件 实例 ,那么 可 以 在 关 
键 帧 中 选中 该 元 件 实例 , 单 击 * 属 性 ?面板 中 的 “交换 ”按钮 ,从 打开 的 “交换 元 件 ” 列 表 框 中 选 
择 需要 的 元 件 , 单 击 “ 确 定 ?按钮 ,该 元 件 实例 被 新 选择 的 元 件 实例 替换 ,不 需要 修改 动画 的 
其 他 内 容 。 如 果 原 元 件 实例 进行 过 颜色 缩放、 倾斜 等 属性 设置 ,这 些 属 性 设置 依然 在 新 元 
件 实例 中 得 到 保留 ,只 是 元 件 实例 的 形状 、 名 称 被 改变 了 。 

5. 影片 剪辑 元 件 实例 的 滤 镜 效果 

一 般 影 片 剪辑 元 件 是 含有 自己 时 间 轴 动画 的 元 件 , 但 也 可 以 是 简单 的 图 形 ,甚至 是 空 元 
件 。 当 元 件 实例 的 类 型 是 影片 剪辑 时 ,在 舞台 中 就 可 以 为 元 件 实例 添加 滤 镜 效果 。 在 “ 滤 
镜 ” 面 板 中 单 击 “ 添 加 滤 镜 ”( 十 ) 按 钮 ,可 以 为 元 件 实例 添加 投影 模糊 ,发 光 、 斜 角 等 滤 镜 
效果 。 

6. 运动 动画 的 制作 

运动 动画 是 由 元 件 实例 的 位 置 、 大 小 、 颜 色 、 透 明度 、 形 态 及 效果 变化 构成 的 ,运动 动画 
的 一 般 制 作 方 法 如 下 : 

(1) 新 建 Flash 文档 ,选择 舞台 大 小 、 舞 台 背 景 颜色 。 

(2) 制作 元 件 。 元 件 可 以 是 图 形 元 件 和 影片 剪辑 。 

(3) 选中 空白 关键 帧 , 拖 和 人 一 个 元 件 实例 到 舞台 中 的 指定 位 置 。 如 果 需 要 改变 元 件 实 
例 的 属性 ,选中 元 件 实例 ,在 “属性 ”面板 中 修改 元 件 的 大 小 、 颜 色 、 透 明度 或 形态 。 对 于 影片 
剪辑 ,还 可 以 添加 滤 镜 效果 。 

(4) 在 该 图 层 的 后 面 指 定 帧 插入 空白 关键 帧 或 关键 帧 。 插 入 关键 帧 是 复制 前 一 个 关键 
帧 ; 插入 空白 关键 帧 则 需要 重新 拖 和 人 元件 实例 到 指定 位 置 ,用 于 前 面 关键 帧 中 修改 了 元 件 
实例 属性 而 该 关键 帧 中 与 前 面 关键 帧 中 元 件 实例 属性 不 同 的 情况 。 

(5) 选中 两 个 关键 帧 之 间 的 某 一 帧 , 右 击 ,在 弹出 菜单 中 选择 “创建 补 间 ”(CS 版 本 中 使 
用 “创建 传统 补 间 ”) 。 该 操作 过 程 以 后 经 常 简称 为 “创建 补 间 动 画 ”。 

注意 : 在 运动 动画 中 ,只 有 同一 个 元 件 实例 (可 以 有 不 同 的 属性 ) 的 两 个 关键 帧 之 间 可 
以 创建 运动 补 间 动 画 ; 在 同一 动画 图 层 中 ,同一 时 刻 只 能 有 一 个 元 件 实例 的 运动 动画 。 

例如 ,制作 一 个 图 片 透明 度 变化 的 运动 动画 ,制作 方法 如 下 : 

(1) 准备 一 张 图 片 素材 ,按照 设计 的 动画 大 小 修改 图 片 的 尺寸 。 

(2) 新 建 Flash 文档 ,按照 设计 要 求 设置 舞台 大 小 。 

(3) 使 用 “文件 ”1“ 导 入 ”|“ 导 和 到 库 ” 命 令 将 图 片 导入 文档 。 

(4) 选中 图 层 1 的 空白 关键 帧 ,在 * 库 ?面板 中 将 导入 的 图 片 拖 人 到 舞台 。 

(5) 选中 图 片 ,使 用 F8 键 将 图 形 转换 成 元 件 。 

(6) 在 图 层 1 的 第 40 帧 、 第 80 帧 插入 关键 帧 。 

(7) 选中 第 40 帧 的 关键 帧 ,在 “属性 ?面板 中 修改 元 件 实例 的 不 透明 度 为 20%。 

(8) 使 用 Shift 键 配合 选中 第 1 帧 到 第 80 帧 , 右 击 ,在 弹出 菜单 中 选择 “创建 补 间 ” 命 
令 , 同 时 创建 两 段 补 间 动 画 。 

(9) 预览 动画 效果 。 

7. 运动 动画 补 间 属 性 

在 运动 动画 中 ,创建 补 间 动 画 后 ,“ 属 性 ”面板 中 动画 补 间 属 性 部 分 如 图 6-34 所 示 。 
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ET 属性 ” 涛 镜 | 参数 

原 中 ?ha:[E 画 同 避 8 | 志 无 同 
| 。 合 标 签 》 || 级 动 | 上 编辑 ... | 效果 : 无 编辑 
标签 类 型 ， 旋转 : | 自动 局“ 同步: 事 折 加 重复 加 | 
名 称 调整 到 障 径 。 回 同步” 回 对 齐 没有 选择 声音 


图 6-34 运动 动画 补 间 属 性 


其 中 “缩放 ” 复 选 框 选中 时 表示 补 间 帧 中 允许 元 件 实例 的 缩放 ;“ 缓 动 ” 指 示 元 件 实 例 的 
匀 加 ( 减 ) 速 运动 , 正 数值 表示 匀 减 速 运动 ,负数 值 表示 匀 加 速 运动 ,加 速度 的 大 小 取决 于 “组 
动 ” 的 绝对 值 。 如 果 对 象 不 是 作 匀 加 ( 减 ) 速 运动 ,可 以 单 击 “编辑 ”按钮 (CS 版 本 中 为 铅笔 图 
标 ) 打 开 如 图 6-35 所 示 的 “ 自 定义 组 入 / 缓 出 "对话 框 ,利用 调整 曲线 方式 确定 对 象 的 阶段 运 
动 速度 。 


自 定义 强 入 / 组 出 划 


属性 :| 了 | 全 为 所 有 属性 使 用 一 种 设置 
100% 
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“旋转 ”属性 确定 元 件 实例 在 补 间 帧 中 是 否 需要 旋转 、 旋 转 的 方向 和 次 数 。 元 件 实例 的 
旋转 是 围绕 元 件 实例 中 心 点 转动 。 元 件 实例 中 心 点 在 运动 动画 中 是 一 个 很 重要 的 概念 ,在 
很 多 教材 中 有 中 心 点 与 元 件 注册 点 混淆 的 地 方 , 称 其 为 注册 点 。 在 Flash 帮助 中 也 没有 “中 
心 点 ”一 词 ,本 书 使 用 “元 件 实例 中 心 点 "的 概念 。 

当 使 用 任意 变形 工具 选中 元 件 实例 时 ,元 件 实 例 上 会 出 现 调整 手柄 和 一 个 空心 圆圈 , 空 
心 圆圈 表 示 的 元 件 实例 中 心 点 (“十 ”为 元 件 注册 点 )。 虽 然 元 件 实例 有 大 有 小 ,但 在 程序 代 
码 中 表示 元 件 实例 时 ,是 用 它 的 中 心 点 表示 元 件 实例 位 置 的 。 元 件 实例 的 运动 轨迹 其 实质 
是 元 件 实例 中 心 点 的 运动 轨迹 。 

在 运动 动画 中 ,如 果 设 置 了 补 间 帧 的 “旋转 ”属性 ,利用 元 件 实例 旋转 是 围绕 元 件 实例 中 
心 点 转动 的 原理 ,可 以 实现 多 种 动画 效果 。 

例如 ,制作 如 图 6-36 所 示 的 地 球 围绕 太阳 旋转 动画 。 
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6-36 ”地 球 绕 太 阳 旋 转 


制作 步骤 如 下 : 

(1) 新 建 Flash 文档 ,舞台 大 小 为 300X300px, 舞 台 背 景 为 白 蓝 色 。 

(2) 在 “ 库 ? 面 板 中 创建 蓝 绿色 放射 状 填充 的 图 形 元 件 * 地 球 ”。 使 用 填充 变形 工具 ,将 
“地 球 ” 元 件 的 填充 中 心 移动 到 球体 一 侧 。 

(3) 在 “ 库 ” 面 板 中 创建 黄白 色 放射 状 填 充 的 影片 剪辑 元 件 “ 太 阳 ”。 使 用 填充 变形 工 
具 , 将 “太阳 ”元 件 的 填充 中 心 移动 到 球体 一 侧 。 

(4) 修改 图 层 1 名 称 为 “太阳 ”。 选 中 “太阳 ”图 层 的 第 1 帧 ,从 “ 库 ” 面 板 中 将 “太阳 ”元 
件 拖 入 舞台 中 心 。 使 用 “ 滤 镜 ”面板 为 太阳 添加 “发 光 ” 滤 镜 效果 (发 光 颜色 为 淡 黄 色 、 模 糊 参 
数 设置 为 30)。 

(5) 选中 “太阳 ”图 层 的 第 40 帧 ,插入 关键 帧 。 碳 击 两 个 关键 帧 之 间 的 静止 帧 ,创建 补 
间 动 画 。 在 “属性 ”面板 中 设置 “旋转 ”为 * 顺 时 针 ”“1” 次 。 

(6) 插入 图 层 * 地 球 ”。 

(7) 选中 “地 球 ” 图 层 的 第 1 帧 ,从 “ 库 ” 面 板 中 将 “地 球 "元 件 拖 入 舞台 一 侧 , 高 光 部 分 对 
准 “ 太 阳 ? 元 件 实例 的 高 光 部 分 。 

(8) 选中 “地 球 "元 件 实例 , 单 击 任意 变形 工具 ， 

将 “地 球 ” 元 件 实 例 的 中 心 点 (空白 圆圈 ) 拖 动 到 “ 太 wu， p 
阳 ” 元 件 实例 的 中 心 位 置 ,如 图 6-37 所 示 。 条 [三 

(9) 选中 “地 球 ” 图 层 的 第 40 帧 ,插入 关键 帧 。 
右 击 两 个 关键 帧 之 间 的 静止 帧 ,创建 补 间 动 画 。 在 ”图 6-37 调整 "地 球 " 元 件 实例 中 心 点 
“属性 ?面板 中 设置 “旋转 ?为 “ 顺 时 针 ”“1? 次 。 

(10) 预览 动画 。 
6.4.4 ”轨迹 动画 

轨迹 动画 是 运动 动画 中 的 高 级 动画 ,是 用 导线 引导 元 件 实例 运动 ,从 而 控制 元 件 实例 的 

轨迹 动画 的 制作 方法 是 在 动画 中 添加 引导 层 ,运动 的 元 件 实例 在 被 引导 层 中 。 引 导 层 
内 只 有 导线 ,导线 在 播放 动画 时 不 会 显示 出 来 。 一 个 引导 层 内 可 以 有 多 条 导线 ,一 条 导线 可 


“地 球 "元 件 
实例 中 心 点 
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以 引导 多 个 图 层 内 的 元 件 。 
例如 ,制作 如 图 6-38 所 示 的 演示 抛物 线 运动 的 动画 。 


6-38 ”演示 抛物 线 运动 的 动画 


制作 步骤 如 下 : 

(1) 新 建 Flash 文档 ,舞台 大 小 为 550X400px, 舞 台 背 景 为 白色 。 

(2) 在 “ 库 ” 面 板 中 创建 图 形 元 件 “ 球 ”, 黑 白色 放射 状 填 充 。 

(3) 修改 图 层 1 名 称 为 “背景 ", 在 “背景 "绘制 背景 图 案 。 在 第 40 帧 插入 静止 帧 。 

(4) 插入 “运动 ”图 层 , 将 图 形 元 件 “ 球 ” 拖 入 舞台 “运动 ”图 层 第 1 帧 。 在 第 20 帧 插入 关 
键 帧 ,将 “ 球 ” 拖 到 “桌子 ”边缘 ,创建 补 间 动 画 。 

(5) 在 “运动 "图 层 第 30 帧 插入 关键 帧 ,将 “ 球 ” 拖 到 “地 面 "位 置 ,创建 补 间 动 画 。 在 第 
40 帧 插入 静止 帧 。 

(6) 插入 引导 层 (在 CS 版 本 中 需要 设置 图 层 的 属性 为 引导 层 , 并 将 被 引导 层 拖 和 人 引导 
层 才能 被 引导 ,而 且 被 引导 层 在 拖 入 引导 层 之 前 不 能 创建 动画 ) ,在 引导 层 第 20 帧 插入 空白 
关键 帧 ,使 用 绘图 工具 绘制 抛物 线 导 线 , 如 图 6-38 所 示 。 

(7) 选择 “运动 "图 层 第 20 帧 ,将 “ 球 ” 元 件 实例 中 心 点 对 准 导 线 。 选 择 “ 运 动 * 图 层 第 
30 帧 ,将 “ 球 ” 元 件 实例 中 心 点 对 准 导 线 。 

(8) 设置 运动 加 速度 。 选 择 * 运 动 ” 图 层 第 20 帧 , 单 击 “ 属 性 ”面板 中 “编辑 ”按钮 ,打开 
“ 自 定义 组 入/ 缓 出 ”对 话 框 ,调整 运动 速率 曲线 成 抛物 线 状 ,如 图 6-39 所 示 。 

(9) 预览 动画 。 
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6-39 抛物 线 运动 速率 曲线 


6.4.5 天 曾 动 画 


1. 遮 罩 动画 的 概念 与 制作 

遮 单 效果 和 Fireworks 中 的 蒙 版 效果 相同 , 莹 单 动画 是 蒙 版 效果 的 动画 ,例如 演示 望 远 
镜 效 果 .聚光灯 效果 等 。 

遗 音 动画 是 由 遮 单 图 像 和 遮 罩 元 件 的 相互 运动 构成 的 。 它 们 可 以 是 一 个 静止 一 个 运 
动 ,也 可 以 是 同时 运动 。 

遗 畦 元件 可 以 是 矢量 图 形 或 元 件 。 和 路 单 动画 显示 的 内 容 是 遮 音 图像 和 遮 单元 件 相交 的 
部 分 。 

制作 遮 单 动画 至 少 需要 两 个 图 层 , 一 个 图 层 放置 被 遗 单 图 像 ， 另 一 个 图 层 放 置 遮 单元 
件 。 放 置 谈 单元 件 的 图 层 称 为 遮 日 层 ; 放置 被 谈 单 图 像 的 层 称 为 被 谈 娃 层 。 被 谈 畦 层 必须 
在 遮 单 层 的 下 面 。 遗 单 层 和 被 遗 单 层 中 至 少 一 个 层 为 动画 才能 形成 遮 单 动画 。 

遗 置 与 被 遮 置 关 系 的 确定 需要 使 用 * 图 层 属性 ?对 话 框 设 置 ( 见 图 6-8)。 使 用 “图 层 属 
性 ?对 话 框 中 的 “ 遮 淖 层 ” 和 * 被 遗 音 ?图 层 类 型 选项 确定 本 图 层 是 遮 置 层 还 是 被 遗 单 层 。 解 
除 庶 畦 与 被 谈 单 关系 可 以 使 用 “图 层 属性 ”对 话 框 中 的 “一 般 ” 图 层 类 型 选项 。 

一 个 遮 单 层 中 可 以 有 多 个 被 遗 单 层 , 一 个 动画 中 可 以 有 多 个 遗 单 层 , 通 过 巧妙 构思 ， 
可 以 实现 多 种 喧 音 效果。 如 果 遗 单 动画 需要 有 背景 图 像 ,背景 图 像 必须 是 最 底层 的 一 般 
图 层 。 

2. 遮 淖 动画 制作 举例 

当 遮 罩 层 使 用 形变 动画 作为 遮 音 元件 时 ,会 制作 出 逐渐 展开 ,收缩 等 效果 的 形变 遮 音 动 
画 。 例 如 ,制作 如 图 6-40 所 示 图 像 从 中 央 展 开 效 果 动 画 , 制 作 方 法 如 下 : 

(1) 新 建文 档 , 舞 台大 小 为 400 X300px。 

(2) 修改 图 层 1 名 称 为 “背景 ", 导 入 一 张 图 片 。 在 “背景 ”图 层 第 40 帧 插入 静止 帧 。 

(3) 插入 图 层 “ 遮 日 ”。 选 择 “ 庶 晶 ” 图 层 第 1 帧 ,使 用 椭圆 工具 在 舞台 中 心 绘制 无 笔触 
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图 6-40 图 像 从 中 央 展 开 效 果 动 画 


色 的 小 椭圆 。 

(4) 在 “ 遮 单 ”图 层 第 30 帧 插入 空白 关键 帧 ,使 用 椭圆 工具 在 舞台 中 心 绘制 无 笔触 色 的 
大 椭圆 。 

(5) 选择 “ 遮 单 ”图 层 第 1 帧 ,在 “属性 ”面板 设置 “形变 ” 补 间 。 

(6) 在 “ 遮 单 ”图 层 第 40 帧 插入 空白 关键 帧 ,使 用 矩形 工具 绘制 矩形 覆盖 图 片 。 

(7) 选择 * 遮 单 ” 图 层 第 30 帧 ,在 “属性 ”面板 设置 “形变 ” 补 间 。 

(8) 预览 动画 。 

利用 遮 淖 动画 的 原理 和 其 他 动画 结合 ,经 过 巧妙 构思 ,就 可 以 实现 多 种 效果 的 动画 。 例 
如 ,制作 如 图 6-41 所 示 的 3 幅 图 片 交替 展示 效果 的 动画 。 


图 6-41 3 幅 图 片 交 蔡 展 示 效 果 的 动画 


该 动画 的 原理 其 实 很 简单 ,在 Flash 的 两 个 图 层 中 分 别 放置 两 张 图 片 ,将 上 面 图 层 制 作 
成 遮 四 动画 ,初始 状态 如 果 遗 罩 元 件 完 全 没有 遗 住 图 片 , 上 面 的 图 片 就 不 会 显示 ,只 有 下 面 
的 图 片 显示 。 在 遮 蛙 层 中 让 谈 淖 元 件 运动 逐渐 遮 住 上 层 的 图 片 ,那么 上 层 的 图 片 就 会 逐渐 
显示 出 来 。 当 上 面 图 层 中 的 图 片 显示 时 ,下 面 图 层 中 的 图 片 自 然 就 会 被 挡住 。 按 照 这 个 原 
理 制作 该 动画 如 下 : 

(1) 新 建 Flash 文档 ,舞台 大 小 与 图 片 大 小 一 致 。 

(2) 导入 第 1 幅 图 片 , 放 在 图 层 1 的 第 1 帧 中 ,在 该 图 层 第 40 帧 插入 静止 帧 。 
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(3) 新 建 图 层 2, 导 入 第 2 幅 图 片 , 放 在 图 层 2 的 第 1 帧 中 ,在 该 图 层 第 40 帧 插入 更 
止 帧 。 

(4) 新 建 图 层 3 ,在 图 层 3 的 第 1 帧 中 绘制 一 个 和 舞台 相同 大 小 的 矩形 色 块 ,将 色 块 转 
换 成 元 件 “ 色 块 "。 将 “ 色 块 ”元件 实 例 的 右边 与 舞台 左边 对 齐 。 在 该 图 层 第 40 帧 插入 关键 
帧 ,将 “ 色 块 "元件 实例 与 舞台 对 齐 ( 完 全 庶 住 舞台 ) ,在 该 图 层 创建 补 间 动 画 。 

这 时 如 果 设 置 该 图 层 属性 为 “ 遮 蛙 层 ”, 预 览 动画 就 可 以 看 到 一 幅 图 片 展开 、 另 一 幅 图 片 
收 起 的 效果 ,但 是 该 动画 中 包括 3 幅 图 片 的 交替 展现 ,所 以 按照 同样 的 原理 可 以 完成 下 面 的 
动画 制作 。 

(5) 在 图 层 1 中 第 41 帧 插入 空白 关键 帧 ,导入 第 3 幅 图 片 , 放 在 图 层 1 的 第 41 帧 中 ,在 
该 图 层 第 80 帧 插入 静止 帧 。 

(6) 在 图 层 2 中 第 80 帧 插入 静止 帧 。 

(7) 在 图 层 3 的 第 41 帧 .第 80 帧 插入 关键 帧 。 选 中 第 80 帧 ,将 * 色 块 元 件 实例 的 右 
边 与 舞台 左边 对 齐 。 在 该 图 层 第 41 帧 到 第 80 帧 间 创建 补 间 动 画 。 

(8) 选中 图 层 3 ,设置 该 图 层 属性 为 “ 遮 单 层 ”预览 动 画 可 以 看 到 3 幅 图 片 交 替 展 现 
效果 。 

(9) 制作 图 片 卷 起 效果 。 新 建 图 层 4, 在 图 层 4 的 第 1 帧 中 绘制 一 个 与 舞台 高 度 差 5px 
的 无 边线 矩形 ,填充 使 用 灰 一 白 一 灰 线 性 渐变 填充 。 再 绘制 一 个 与 矩形 同 宽 、.10px 高 的 无 
边线 椭圆 形 ,使 椭圆 形 长 轴 与 矩形 项 边 对 齐 ,椭圆 形 使 用 与 图 片 相近 颜色 填充 。 使 用 “修改 ” 
1“ 组 合 ” 命 令 将 矩形 与 椭圆 形 组 合 为 一 个 图 形 , 然 后 转换 成 元 件 “ 画 卷 ”"。 在 图 层 4 的 第 1 帧 
中 将 “画卷 ”元 件 实例 的 左边 与 舞台 左边 对 齐 , 在 第 40 帧 插入 关键 帧 ,将 “画卷 元件 实 例 的 
左边 与 舞台 右边 对 齐 ,创建 补 间 动画 。 在 图 层 4 的 第 41 帧 插入 关键 帧 ,将 “画卷 元件 实 例 
的 右边 与 舞台 右边 对 齐 , 在 第 80 帧 插入 关键 帧 ,将 “画卷 "元件 实 例 的 右边 与 舞台 左边 对 齐 ， 
创建 补 间 动 画 。 

(10) 预览 动画 效果 。 


6.4.6 在 动画 中 插入 声音 


Flash 动画 中 可 以 插入 声音 。 声 音 可 以 独立 于 时 间 轴 连续 播放 ,或 与 动画 同步 播放 , 通 
过 声音 淡 入 ,淡出 还 可 以 使 声音 更 加 优美 。Flash 中 可 以 导入 WAV、MP3 格式 的 声音 
件 ,MP3 格式 比 WAV 声音 文件 有 更 高 的 压缩 比 。 

1. 导入 声音 

在 Flash 中 使 用 声音 需要 先 把 声音 文件 导入 到 “ 库 ” 面 板 中 。 使 用 “文件 ”1“ 导 入 ”|“ 导 
入 到 库 ” 命 令 打开 “导入 到 库 ” 对 话 框 ,选择 需要 的 声音 文件 即 可 。 

2. 向 动画 中 添加 声音 

向 动画 中 添加 声音 ,首先 选中 需要 添加 声音 图 层 的 帧 (声音 总 是 从 关键 帧 开始 ,关键 帧 
包括 空白 关键 帧 ), 从 库 中 将 声音 文件 拖 动 到 舞台 即 可 。 声 音 在 图 层 中 的 长 度 是 两 个 关键 帧 
之 间 的 间隔 ,或 到 该 关键 帧 的 延续 静止 帧 结束 为 止 ,或 者 到 声音 的 结束 为 止 。 声 音 可 以 和 其 
他 对 象 在 同一 图 层 中 ,但 最 好 将 每 个 声音 放 在 一 个 独立 的 图 层 上 。 

3. 声音 属性 

在 “时 间 轴 ”面板 中 ,选择 声音 文件 所 在 的 图 层 中 包含 声音 的 帧 ,“ 属 性 ?面板 中 显示 声音 
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属性 ,如 图 6-42 所 示 。 


属性 
I 由 外 本 大 了 声音 : [sasimp3 了 
《< 帧 标签 > 效果 中 无 了 | 编辑 … 
标签 类 型 ; 同步 : | 数据 流 “到 | 重复 ||! 
[Ea | 特 Ntz 立 体 声 16 位 6.85108.7KB 


图 6-42 声音 属性 


(1)“ 声 音 ” 列 表 框 : 从 中 可 以 选择 “ 库 ” 面 板 中 的 声音 对 象 。 如 果 需 要 删除 声音 ,选择 
其 中 的 “无 ”选项 。 

(2)“ 同 步 "列表 框 : 从 中 可 以 选择 “事件 ”"“ 开 始 "“ 停 止 ”"“ 数 据 流 ”选项 。 

Q@ “事件”; 将 声音 和 一 个 事件 的 发 生 过 程 同 步 起 来 ,常见 的 事件 是 进入 该 关键 帧 ( 执 
行 到 该 关键 帧 ) 。 选 择 * 事 件 ” 同 步 时 , 当 事 件 发 生 时 开始 播放 声音 ,并 独立 于 时 间 轴 完整 播 
放 , 即 使 SWF 文件 停止 播放 也 会 继续 。 如 果 SWF 文件 较 短 而 声音 文件 较 长 , 当 SWF 文件 
循环 播放 时 ,可 能 会 启动 多 个 声音 播放 实例 。 

@ “开始 ”: 与 “事件 ?选项 的 功能 相近 ,但 是 如 果 声 音 已 经 在 播放 , 则 新 声音 实例 不 会 
播放 。 

名 “停止 ”: 停止 声音 播放 。 使 用 方法 为 : 在 声音 所 在 图 层 或 其 他 图 层 中 需要 声音 停止 
的 帧 中 插入 空白 关键 帧 ,在 “声音 ”列表 框 中 选择 需要 停止 的 声音 文件 ,将 “同步 ”设置 为 
“停止 ”。 

“数据 流 ”: 使 声音 与 动画 同步 ,音频 流 随 着 SWF 文件 的 停止 而 停止 。 而 且 ,音频 流 
的 播放 时 间 绝 对 不 会 比 帧 的 播放 时 间 长 。 

(3) 重复 与 循环 : 当 声 音 文件 比 需 要 播放 的 时 间 短 时 ,可 以 选择 是 “重复 ”还 是 “循环 ” 
方式 。 一 般 不 要 选择 “循环 ”方式 。“ 循 环 "方式 会 增加 SWF 文件 的 字 节 大 小 ,导出 的 文件 
中 相当 于 包含 了 多 个 声音 文件 。 一 般 使 用 “重复 ”方式 ,通过 指定 重复 的 次 数 , 可 以 达到 与 
“循环 "方式 相同 的 效果 ,但 导出 的 文件 中 只 包含 一 个 声音 文件 。 

(4)“ 效 果 ” 列 表 框 : 其 中 包括 “ 左 声 道 "“ 右 声 道 "“ 从 左 到 右 淡 出 "“ 从 右 到 左 淡出 ”、 
“ 淡 入 ”“ 淡 出 ”选项 。 

@“ 左 声 道 ?/ 右 声 道 ”: 只 在 左 声 道 或 右 声 道中 播放 声音 。 

@“ 从 左 到 右 淡 出 ”从 右 到 左 淡出 ”: 会 将 声音 从 一 个 声 道 切换 到 另 一 个 声 道 。 

名“ 淡 入 ”: 会 在 声音 的 持续 时 间 内 逐渐 增加 其 幅度 。 

外 “淡出 ”: 会 在 声音 的 持续 时 间 内 逐渐 减 小 其 幅度 。 

如 果 需 要 删除 设置 的 声音 效果 ,可 以 选择 “无 ”选项 ; 如 果 需 要 自己 定义 声音 效果 ,可 以 
选择 其 中 的 *“ 自 定义 ”选项 ,打开 “编辑 封套 ”对 话 框 ,如 图 6-43 所 示 。 

拖 动 “编辑 封套 ”中 的 “开始 时 间 ” 和 “终止 时 间 ” 控 件 , 可 以 改变 声音 的 起 始点 和 终止 点 ; 
封套 线 显示 声音 播放 时 的 音量 强 弱 , 拖 动 封套 手柄 可 以 改变 声音 中 不 同 点 处 的 强 弱 级 别 。 

单 击 封套 线 可 以 创建 其 他 封套 手柄 (总 共 可 达 8 个 )。 要 删除 封套 手柄 , 需 将 其 拖 出 
窗口 。 

单 击 “ 放 大 ”或 “缩小 ”按钮 ,可 以 改变 窗口 中 显示 声音 的 多 少 。 
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开始 时 间 终止 时 间 


停止 播放 放大 缩小 秒 帧 
图 6-43 “编辑 封套 ”对 话 框 


要 在 秒 和 帧 之 间 切 换 时 间 单 位 ,可 单 击 “ 秒 "和 *“ 帧 "按钮 。 
单 击 “播放 ”按钮 ,可 以 听 编 辑 后 的 声音 。 


6.4.7 Flash 按钮 


Flash 按钮 可 以 包含 翻转 图 形 ,声音 ,甚至 可 以 具有 自己 的 动画 。 在 “窗口 ”|* 公 用 库 ?| 
“按钮 命令 中 ,可 以 打开 许多 漂亮 按钮 。Flash 按钮 只 能 在 Flash 文档 中 使 用 。 

1. 创建 按钮 

在 “ 库 ? 面 板 中 新 建 元 件 ,在 “创建 新 元 件 ?对 话 框 的 “类 型 ”中 选择 “按钮 ,打开 按钮 元 件 
编辑 窗口 ,如 图 6-44 所 示 。 


| 会 | mo bl tT [iz.0 fs [0.0s 4 


6-44 ”按钮 元 件 编辑 窗口 


Flash 按钮 实际 上 是 4 帧 的 交互 影片 剪辑 ,前 3 帧 显示 按钮 的 3 种 可 能 状态 ,第 4 帧 定 
义 按 钮 的 活动 区 域 。 时 间 轴 实际 上 并 不 播放 , 它 只 是 对 鼠标 动作 做 出 反应 , 跳 到 相应 的 帧 。 
按钮 元 件 的 时 间 轴 上 的 每 一 帧 都 有 一 个 特定 的 功能 ,列举 如 下 : 

(1) 第 1 帧 是 弹 起 状态 ,代表 指针 没有 经 过 按钮 时 该 按钮 的 状态 。 

(2) 第 2 帧 是 指针 经 过 状态 ,代表 当 指针 滑 过 按钮 时 该 按钮 的 外 观 。 

(3) 第 3 帧 是 按 下 状态 ,代表 单 击 按钮 时 该 按钮 的 外 观 。 

(4) 第 4 帧 是 点 击 状态 ,定义 响应 鼠标 单 击 的 区 域 ,此 区 域 在 SWF 文件 中 是 不 可 
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见 的 。 

选中 “ 弹 起 ” 帧 ,在 舞台 中 心 绘制 按钮 图 形 ; 选中 “指针 经 过 ” 帧 ,插入 关键 帧 ,“ 弹 起 ” 帧 
的 图 形 被 复制 到 “指针 经 过 ” 帧 ,修改 图 形 的 填充 效果 是 最 简单 的 按钮 制作 方法 。“ 按 下 ” 帧 
和 “指针 经 过 ” 帧 的 处 理 过 程 是 相同 的 。“ 点 击 ” 帧 中 的 图 形 是 不 可 见 的 ,只 是 定义 按钮 的 活 
动 区 域 ,按钮 的 活动 区 域 可 以 比 前 面 帧 中 的 图 形 大 或 小 ,也 可 以 是 不 同 的 位 置 。 如 果 不 设置 
“点 击 ” 帧 中 的 按钮 的 活动 区 域 , 按 钮 的 活动 区 域 就 是 “ 弹 起 ” 帧 中 的 图 形 区 域 。 

单 击 * 场 景 "按钮 ,完成 按钮 元 件 制作 ,按钮 元 件 出 现在 * 库 ?面板 中 。 使 用 按钮 时 需要 将 
按钮 元 件 拖 人 舞台 作为 一 个 按钮 元 件 实例 使 用 。 每 个 按钮 元 件 实例 可 以 起 一 个 名 字 ,尤其 
是 需要 为 按钮 添加 动作 脚本 时 ,按钮 实例 名 称 是 必需 的 。 按 钮 实例 还 可 以 添加 斜 角 、 发 光 、 
投影 等 滤 镜 效果 。 

2. 制作 音乐 按钮 

创建 按钮 元 件 时 ,在 “ 弹 起 ”“ 指 针 经 过 ”"“ 按 下 ” 帧 中 加 入 声音 ,“ 同 步 ”属性 选择 “ 事 
件 ”, 当 发 生 相应 事件 时 ,就 会 发 出 相应 声音 (按钮 中 的 声音 在 事件 发 生 时 只 播放 一 次 )。 声 
音 可 以 放置 在 按钮 的 关键 帧 中 ,最 好 插入 一 个 图 层 , 将 声音 放 在 单独 图 层 和 相应 事件 对 应 的 
帧 中 。 


6.4.8 影片 剪辑 


影片 剪辑 是 一 个 动画 或 者 是 一 个 图 形 ,甚至 可 以 是 空 元 件 。 影 片 剪辑 元 件 和 图 形 元 件 
的 区 别 在 于 影片 剪辑 元 件 中 可 以 包含 动画 ,而 且 可 以 添加 发 光 、 投 影 、. 斜 角 等 滤 镜 效果 。 

创建 影片 剪辑 元 件 的 过 程 和 制作 一 个 动画 的 过 程 完全 相同 ,影片 剪辑 元 件 中 可 以 是 各 
种 类 型 的 动画 ,其 中 还 可 以 包含 影片 剪辑 元 件 。 

例如 ,制作 如 图 6-45 所 示 演 示 太 阳 、 地 球 . 月 亮 运行 关系 
的 动画 。 他 【加 

制作 方法 如 下 : 

(1) 新 建 Flash 文档 ,舞台 大 小 为 400 X 400px。 

(2) 在 “ 库 ? 面 板 中 创建 黄白 色 放射 状 填充 球形 影片 剪辑 
元 件 “ 太 阳 ”。 使 用 填充 变形 工具 ,将 “太阳 ”元 件 的 填充 中 心 
移动 到 球体 一 侧 。 

(3) 在 “ 库 ” 面 板 中 创建 黑白 放射 状 填 充 球形 图 形 元 件 
“月 亮 "。 使 用 填充 变形 工具 ,将 “月 亮 ” 元 件 的 填充 中 心 移动 
到 球体 一 侧 。 

(4) 制作 * 地 球 ” 影 片 剪辑 。 

g@ 在 * 库 ?面板 中 创建 影片 剪辑 元 件 * 地 球 ”, 使 用 椭圆 工具 绘制 蓝 绿色 放射 状 填充 球体 
表示 地 球 ,使 用 填充 变形 工具 ,将 地球 ”的 填充 中 心 移动 到 球体 一 侧 。 在 第 30 帧 插入 静 
止 帧 。 

@ 插入 一 个 图 层 , 将 图 形 元 件 “ 月 亮 " 拖 入 元 件 编辑 窗口 ,放置 在 “地 球 ” 一 侧 , 将 “月 亮 ” 
元 件 实例 的 中 心 点 拖 动 到 “地 球 ” 图 形 中 心 。 在 第 30 帧 插入 关键 帧 ,创建 补 间 动 画 ,在 “ 属 
性 ”面板 中 设置 “旋转 ”为 “ 顺 时 针 ”、“1” 次 。 单 击 “ 场 景 "按钮 ,完成 地球” 影片 剪辑 元 件 的 
制作 。 


图 6-45 太阳 ,地 球 、 月 亮 运 行 
关系 演示 动画 
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(5) 修改 图 层 1 名 称 为 “太阳 ”。 选 中 “太阳 ”图 层 的 第 1 帧 ,从 * 库 ?面板 中 将 “太阳 ”元 
件 拖 入 舞台 中 心 。 使 用 “ 滤 镜 ”面板 为 太阳 添加 “发 光 ” 滤 镜 效 果 ( 发 光 颜色 为 淡 黄 色 、 模 糊 参 
数 设 置 为 30)。 

(6) 选中 “太阳 ”图 层 的 第 365 帧 , 插 和 人 关键 帧 。 右 击 两 个 关键 帧 之 间 的 静止 帧 ,创建 
补 间 动画 。 在 “属性 ?面板 中 设置 “旋转 ?为 “ 顺 时 针 ”“1? 次 。 

(7) 插入 图 层 “ 地 球 ”, 选 中 “地 球 ” 图 层 的 第 1 帧 ,从 * 库 ?面板 中 将 “地球 ”影片 剪辑 元 件 
拖 人 舞台 一 侧 , 地 球 ” 的 高 光 部 分 对 准 * 太 阳 ? 元 件 实例 的 高 光 部 分 。 选 中 * 地 球 " 元 件 实例 ， 
将 “地 球 ” 元 件 实例 的 中 心 点 拖 动 到 “太阳 ”元 件 实例 的 中 心 位 置 。 

(8) 选中 “地 球 ” 图 层 的 第 365 帧 ,插入 关键 帧 ,创建 补 间 动 画 。 在 “属性 ”面板 中 设置 
“旋转 ”为 “ 顺 时 针 ”、“1” 次 。 

(9) 预览 动画 。 


6.4.9 多 场景 动画 


一 个 动画 中 可 以 有 多 个 场景 。 使 用 多 个 场景 可 以 更 好 地 组 织 动画 内 容 。 如 果 影 片 中 需 
要 有 交互 控制 ,使 用 多 场景 更 易于 交互 控制 。 

需要 添加 场景 时 ,可 以 使 用 “窗口 "1“ 其 他 面板 1“ 场景 "命令 打开 “场景 "面板 ,如 图 6-46 
所 示 。 


删除 场景 | 


Ea ol 添加 场景 


场景 面板 


人 | 
外 +| 辣 | 
图 6-46 “场景 "面板 及 场景 选择 


当前 场景 


单 击 “ 场 景 "面板 中 的 “添加 场景 "按钮 可 以 添加 一 个 场景 。“ 场 景 "面板 中 的 场景 排列 顺 
序 是 动画 的 执行 顺序 。 在 “场景 "面板 中 可 以 修改 场景 名 称 及 拖 动 场景 改变 排列 顺序 。“ 复 
制 场景 "按钮 可 以 为 当前 场景 的 动画 复制 一 个 副本 。 删 除 一 个 场景 后 ,场景 内 的 动画 将 被 
删除 。 


6.4.10 交互 动画 


Flash 交互 动画 是 使 用 动作 脚本 实现 的 。Flash 动作 脚本 语言 使 用 ActionScript 2. 0 
(CS 版 本 中 已 经 升级 到 ActionScript 3. 0) , 它 是 一 门面 向 对 象 的 编程 语言 。ActionScript 语 
言 编程 是 单独 的 一 门 课程 。 简 单 的 交互 动画 可 以 借助 Flash* 动 作 ?面板 完成 ,而 不 需要 去 
详细 了 解 ActionScript 语言 。 

1. Flash 脚本 编程 对 象 

Flash 动作 脚本 语言 是 面向 对 象 的 编程 语言 .根据 对 象 的 发 生 事件 执行 相应 的 过 程 代 
码 ,实现 对 动画 的 交互 控制 。 在 Flash 动作 脚本 中 ,可 以 编程 的 对 象 是 关键 帧 按钮 和 影片 
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剪辑 元 件 实例 。 

在 关键 帧 或 空白 关键 帧 中 可 以 添加 动作 脚本 。 添 加 了 动作 脚本 的 关键 帧 中 会 显示 “a” 
标识 ,表示 该 关键 帧 中 有 ActionScript 代码 。 所 有 关键 帧 中 都 可 以 添加 动作 脚本 ,但 建议 动 
作 脚 本 单独 放置 在 一 个 层 内 。 

可 以 对 按钮 和 影片 剪辑 元 件 实例 添加 动作 脚本 ,交互 动画 多 数 是 由 按钮 元 件 实例 的 动 
作 脚 本 完成 的 。 动 作 脚 本 只 能 为 有 实例 名 称 的 按钮 或 影片 剪辑 元 件 编写 ,所 以 如 果 需 要 对 
按钮 或 影片 剪辑 元 件 实例 添加 动作 脚本 ,必须 为 元 件 实例 在 “属性 ?面板 中 命名 ,并 且 元 件 实 
例 名 称 不 能 重复 。 

在 动画 中 使 用 Flash 按钮 时 ,Flash 按钮 要 放置 在 一 个 单独 层 内 。 

2. 常用 事件 

关键 帧 中 的 动作 脚本 是 在 执行 该 帧 时 被 执行 的 ,但 对 于 按钮 或 影片 剪辑 元 件 实例 中 的 
动作 脚本 需要 事件 驱动 ,只 有 事件 发 生 时 才 会 执行 相应 事件 处 理 脚 本 。 对 于 简单 的 交互 动 
画 , 经 常 需要 使 用 按钮 事件 ,常用 的 按钮 事件 如 下 。 

(1) press: 鼠标 按 下 。 

(2) releasee: 释放 鼠标 。 

(3) rollover: 鼠标 滑 过 按钮 。 

(4) rollout: 鼠标 从 按钮 上 滑 离 。 

按钮 事件 可 以 在 “动作 ”面板 的 “脚本 助手 ”中 选择 ,也 可 以 在 “代码 提示 ”窗口 中 选择 。 

3. 常用 时 间 轴 控制 函数 

在 简单 的 交互 动画 中 ,主要 是 对 主 时 间 轴 的 控制 和 对 影片 剪辑 中 时 间 轴 的 控制 。 常 用 
的 时 间 轴 控制 函数 如 下 。 

(1) stop(): 停止 时 间 轴 。 

(2) play(): 播放 时 间 轴 。 

(3) gotoAndPlay() .gotoAndStop(): 转移 到 某 场景 某 巾 播放、 停止。 

(4) stopAllSounds(): 停止 播放 声音 。 

4.“ 动 作 ” 面 板 

选中 一 个 关键 帧 或 按钮 元 件 实例 后 ,打开 “动作 ”面板 ,如 图 6-47 所 示 。 

“脚本 命令 选择 ”窗口 中 提供 了 ActionScript 2. 0 语言 全 部 的 函数 、 类 ,操作 符 等 。“ 添 
加 项 目 ” 按 钮 中 的 内 容 和 "脚本 命令 选择 "窗口 中 提供 的 内 容 是 一 样 的 。 在 简单 的 交互 动画 
中 一 般 只 使 用 其 中 的 “全 局 函数 ”中 的 部 分 内 容 。 

在 “对 象 列表 ”窗口 中 ,有 文档 的 结构 和 可 选择 的 编程 对 象 以 及 当前 选择 的 编程 对 象 , 单 
击 某 个 对 象 后 ,就 可 以 对 其 进行 编程 。 

为 对 象 添加 动作 脚本 的 过 程 可 以 通过 选择 脚本 命令 、 函 数 和 在 “和 脚本 助手 "窗口 中 选择 
参数 完成 。 如 果 熟 悉 ActionScript 2. 0 语言 ,可 以 直接 在 脚本 编辑 区 内 书写 脚本 代码 ,但 必 
须 关 闭 “ 脚 本 助手 ”。ActionScript 2. 0 语法 格式 与 C 语言 类 似 。 

5. 为 关键 帧 添加 动作 脚本 

在 关键 帧 中 添加 时 间 轴 控制 函数 stop() .goto() .gotoAndPlay() .gotoAndStop() 等 脚 
本 可 以 改变 动画 的 播放 顺序 。 
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编程 对 象 脚本 助手 脚本 编辑 区 
| | 


etiosscript 0 #2.0 ”二 ] | |on : 当 发 生 特定 最 标 事件 时 执行 动作 


6-47 “动作 ”面板 


6. 按钮 交互 动画 

和 用 户 的 交互 一 般 需 要 使 用 按钮 动作 脚本 。 按 钮 可 以 自己 制作 ,也 可 以 使 用 “公共 库 ” 
中 的 按钮 。 按 钮 应 该 放置 在 一 个 独立 的 图 层 中 。 一 般 需 要 放置 在 第 1 帧 中 ,并 且 该 图 层 中 
只 有 一 个 关键 帧 ,使 用 静止 帧 延续 到 动画 结束 。 一 个 关键 帧 中 可 以 放置 多 个 按钮 , 切 不 可 将 
每 个 按钮 单独 放置 在 一 个 关键 帧 中 。 

为 按钮 实例 添加 行为 ,按钮 实例 必须 具有 实例 名 称 。 选 中 一 个 按钮 实例 后 ,打开 “动作 ” 
面板 为 按钮 实例 添加 行为 。 一 般 按钮 需要 使 用 “影片 剪辑 控制 ”中 的 on 控制 命令 。 选 择 on 
命令 后 ,可 以 在 图 6-47 所 示 的 “动作 ”面板 “脚本 助手 ”窗口 中 选择 鼠标 事件 ,默认 的 鼠标 事 
件 是 “释放 ”, 默 认 的 脚本 代码 是 : 


on (release) { 


} 


在 { } 内 可 以 添加 时 间 轴 控制 函数 stop() .goto() .gotoAndPlay() .gotoAndStop() 等 ， 
用 于 完成 交互 控制 。 

在 “动作 ?面板 “脚本 助手 窗口 中 可 以 选择 多 个 鼠标 事件 ,例如 再 选中 * 滑 过 ” 复 选 框 , 脚 
本 代码 将 是 : 


on (release, rollOver) { 


} 


7. 控制 影片 剪辑 

由 于 Flash 动画 中 可 以 包含 影片 剪辑 ,所 以 构成 了 Flash 动画 的 树 形 层次 结构 。 动 画 
中 的 对 象 可 能 处 于 不 同 层次 的 时 间 轴 上 。 时 间 轴 控制 函数 可 以 控制 任何 层次 的 时 间 轴 ,但 
必须 指定 时 间 轴 的 路 径 。 如 果 没 有 指定 路 径 ,默认 为 主 时 间 轴 ,所 以 在 前 面 的 例题 中 只 能 控 
制 主 时 间 轴 。 
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Flash 中 路 径 的 简单 表示 方法 有 以 下 两 种 。 

(1) 绝对 路 径 。 从 根 节点 开始 的 路 径 。 根 节点 用 _root 表示 ,一 般 代表 主 时 间 轴 。 路 径 
节点 之 间 使 用 “. ”符号 间隔 。 例 如 在 主 时 间 轴 动画 中 有 影片 剪辑 实例 mcl ,如 果 需 要 停止 影 
片 剪辑 实例 mcl 的 播放 则 使 用 : 

_root.mcl.stop(); 

(2) 相对 路 径 。 相 对 路 径 是 从 当前 位 置 开 始 的 路 径 。 相 对 路 径 中 this 表示 当前 位 置 ， 
上 一 级 用 _parent 表示 。 上 面 的 例子 用 相对 路 径 表 
示 为 : 


this.mcl.stop(); 

在 “动作 ”面板 中 添加 动作 脚本 时 ,可 以 通过 单 
击 “ 择 入 目标 路 径 ” 按 钮 打开 “插入 目标 路 径 ” 对 话 
框 ,如 图 6-48 所 示 。 

在 “脚本 助手 窗口 打开 时 ,插入 目标 路 径 ” 按 
钮 不 能 使 用 。 在 需要 插入 路 径 时 必须 关闭 “脚本 助 6-48 “插入 目标 路 径 ” 对 话 框 
手 ” 窗 口 。 在 “插入 目标 路 径 ” 对 话 框 中 可 以 选择 使 
用 相对 路 径 还 是 使 用 绝对 路 径 , 在 对 象 窗口 中 选择 正确 的 对 象 ,就 能 保证 插入 正确 的 路 径 。 
一 般 情况 不 要 自己 书写 路 径 , 在 “插入 目标 路 径 ” 对 话 框 中 选择 路 径 可 以 保证 不 出 错误 。 

8. 打开 网 页 文档 

在 Flash 全 局 函数 的 “浏览 器 /网 络 ” 中 有 一 个 getURL 函数 可 以 打开 网 页 文档 ,所 以 经 
常 在 按钮 动作 脚本 中 使 用 ,其 格式 为 : 


getURL("URL"[, "目标 ", "变量 传送 方式 "] ); 


“URL? 是 打开 的 网 页 文件 路 径 ,注意 其 中 的 路 径 间 隔 符 需要 使 用 */”;“ 目 标 是 超 链 接 
的 target 属性 值 , 即 _blank 、self 等 ;“ 变 量 传送 方式 "是 指 post 和 get 方式 。 例 如 : 


on (press) { 
getURL( "http://www. baidu. com", "— blank"); 
} 


在 单 击 该 按钮 时 将 在 新 窗口 打开 百度 网 站 的 首页 。 
6.5 “家 乡 美 ”动画 页 面 制作 


6.5.1 任务 分 析 


本 任务 是 制作 “Flash 动画 ”栏目 中 的 “家 乡 美 ” 动 画 网 页 。 本 任务 中 主要 是 利用 遮 单 动 
画 完成 图 画 的 展开 一 卷 起 效果 ,以 及 利用 运动 动画 完成 画 轴 卷 动 的 效果 。 该 任务 中 需要 展 
现 的 图 片 有 3 幅 ,3 幅 素 材 图 片 为 images 目录 中 的 tp6-3. jpg、tp6-4. jpg 和 tp6-5. jpg, 图 片 
大 小 为 533X400px。 图 片 装 衬 使 用 images 目录 中 的 tp6-2.jpg 图 片 。 

该 任务 中 的 遮 罩 动 画 中 虽然 包含 3 幅 图 片 ,但 每 幅 图 片 都 是 按照 展开 一 卷 起 的 规律 变 
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化 ,所 以 只 要 制作 出 一 幅 图 片 的 展开 一 卷 起 效果 动画 ,通过 “复制 帧 “粘贴 帧 ”就 可 以 完成 


该 任务 的 制作 。 

6.5.2 ”家 乡 美 " 动画 网 页 制作 
1. 新 建文 档 
新 建 Flash 文档 ,按照 设计 要 求 , 舞 台大 小 为 800X600px, 帧 频 为 12fps。 
2. 背景 层 制作 


按照 设计 要 求 ,图 片 是 装 禄 在 装 寝 布 中 的 , 画 轴 可 以 单独 制作 ,所 以 背景 层 制作 如 下 ; 

(1) 将 图 层 名 修改 为 “背景 ”。 在 背景 层 第 1 帧 使 用 矩形 工具 绘制 一 个 无 边线 的 矩形 ， 
大 小 为 660X500px', 填 充 使 用 * 位 图 填充 ”, 填 充 位 图 选择 images 目录 中 的 tp6-2. jpg。 和 矩形 
在 舞台 中 心 偏 上 10px 放置 。 在 背景 层 第 100 帧 插入 静止 帧 。 

(2) 使 用 “辅助 线 ”"。 为 了 准确 的 定位 ,使 用 “视图 ”| “标尺 ”命令 打开 文档 标尺 显示 , 然 
后 使 用 鼠标 从 左面 标尺 中 拖 出 辅助 线 对 准 上 标尺 的 400, 从 上 标尺 中 拖 出 辅助 线 对 准 左 标 
尺 的 300 ,舞台 及 标尺 显示 如 图 6-49 所 示 。 


| | SR a ee Re ei 
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图 6-49 舞台 及 标尺 


(3) 导 入 images\tp6-3. jpg 到 * 库 ?中 ,从 * 库 ?面板 中 将 tp6-3. jpg 拖 人 舞台 ,放置 在 装 袜 
布 的 中 央 。 为 了 准确 定位 图 片 (以 后 需要 更 换 图 片 ), 再 从 标尺 中 拖 出 两 条 辅助 线 分 别 和 图 
片 的 上 边 .左边 对 齐 。 图 片 位 置 及 辅助 线 显示 如 图 6-50 所 示 。 

3. 制作 遮 罩 动画 

(1) 新 建 图 层 , 修 改 图 层 名 称 为 “ 遮 音 ”。 

(2) 使 用 矩形 工具 绘制 一 个 无 边线 的 红色 色 块 ,大 小 为 100X 600px, 将 色 块 转换 为 图 
形 元 件 , 名 称 为 “ 色 块 >。 将 * 色 块 ? 元 件 实例 上 下 与 舞台 对 齐 , 中 心 线 与 中 心 辅助 线 对 齐 。 
“ 色 块 ?元 件 实例 位 置 如 图 6-51 所 示 。 

(3) 在 “ 遮 单 " 层 的 第 40 帧 .第 90 帧 插入 关键 帧 ,第 100 帧 插入 静止 帧 (一 般 不 需要 插 
入 静止 帧 ,因为 一 般 在 新 建 图 层 时 会 将 静止 帧 自动 延伸 到 动画 最 后 一 帧 ) 。 

(4) 选中 * 遮 罩 ? 层 的 第 40 帧 ,修改 “ 色 块 ?元 件 实例 的 大 小 为 660X600px,“ 色 块 " 元 件 
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6-50 图 片 位 置 及 辅助 线 


图 6-51 “ 色 块 ”元 件 实例 位 置 


实例 完全 覆盖 装 寝 布 。 在 第 1 一 第 40 帧 之 间 创建 补 间 动 画 。 

(5) 在 “ 遮 罩 ” 层 的 第 50 帧 插入 关键 帧 ,在 第 50 一 第 90 帧 之 间 创 建 补 间 动 画 。 

4. 制作 画 轴 效果 

(1) 在 * 库 ?面板 中 新 建 图 形 元 件 * 画 轴 ?”, 使 用 矩形 工具 绘制 一 个 51 X400px 的 矩形 ,无 
边线 ,填充 使 用 浅 绿 一 白 一 浅 绿 线性 渐变 填充 。 两 端 添加 黑色 画 轴 轴 芯 。 

(2) 新 建 图 层 , 图 层 命名 为 “ 左 轴 ”。 将 “ 画 轴 ”元 件 拖 入 “ 左 轴 ” 图 层 第 1 帧 ,“ 画 轴 ” 元 件 
实例 的 上 下 和 装 禄 布 对 齐 ,左边 与 “ 遮 单 层 的 “ 色 块 ?元 件 实例 左边 对 齐 。 再 新 建 图 层 ,图 层 
命名 为 “ 右 轴 ”。 将 “ 画 轴 ”元 件 拖 入 “ 右 轴 ”图 层 第 1 帧 “ 画 轴 ? 元 件 实例 的 上 下 和 装 祛 布 对 
齐 ,右边 与 “ 遮 罩 ? 层 的 “ 色 块 ? 元 件 实例 右边 对 齐 。 画 轴 位 置 如 图 6-52 所 示 。 

(3) 在 “ 左 轴 ?图 层 第 40 帧 .第 90 帧 插入 关键 帧 。 选 中 * 左 轴 ? 图 层 第 40 帧 ,将 * 画 轴 ?” 
元 件 实例 水 平移 动 到 装 寝 布 外 面 , 使 * 画 轴 ? 元 件 实例 右边 与 装 禄 布 左边 对 齐 ,创建 补 间 动 
画 ; 在 “ 左 轴 ”图 层 第 50 帧 插入 关键 帧 ,在 第 50 一 第 90 帧 之 间 创 建 补 间 动 画 。 
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6-52 ” 画 轴 位 置 


(4) 在 “ 右 轴 ”图 层 第 40 帧 .第 90 帧 插入 关键 帧 。 选 中 * 右 轴 ?” 图 层 第 40 帧 ,将 “ 画 轴 ” 
元 件 实例 水 平移 动 到 装 实 布 外 面 ,使 “ 画 轴 ”元 件 实例 左边 与 装 裕 布 右边 对 齐 , 创 建 补 间 动 
画 ; 在 “ 右 轴 ?图 层 第 50 帧 插入 关键 帧 ,在 第 50 一 第 90 帧 之 间 创 建 补 间 动 画 。 

到 此 为 止 ,如 果 将 * 遮 单 ” 层 属性 设置 为 “ 遮 章 层 ”, 一 幅 图 片 的 展开 一 卷 起 动画 就 制作 完 
成 了 。 

5. 制作 另外 两 幅 图 片 的 遮 罩 动画 

(1) 导入 images\tp6-4.jpg\tp6-5.jpg 到 * 库 中。 

(2) 在 背景 层 的 第 300 帧 插入 静止 帧 ,在 第 101 帧 插入 关键 帧 。 选 中 背景 层 第 101 帧 ， 
删除 其 中 的 图 片 ( 注 意 不 要 删除 装 社 布 ), 从 * 库 ?面板 中 将 tp6-4. jpg 拖 入 到 第 101 帧 ,图 片 
位 置 和 左 、 上 辅助 线 对齐 。 在 背景 层 的 第 201 帧 插入 关键 帧 ,选中 背景 层 第 201 帧 ,删除 其 
中 的 图 片 (注意 不 要 删除 装 祝 布 ), 从 “ 库 " 面 板 中 将 tp6-5. jpg 拖 入 到 第 201 帧 ,图 片 位 置 和 
左 、 上 辅助 线 对 齐 。 

(3) 选中 * 遗 罩 ? 层 的 第 1 一 第 100 帧 , 右 击 选中 的 帧 ,在 弹出 菜单 中 选择 “复制 帧 "命令 ; 
右 击 “ 遮 单 ” 层 的 第 101 帧 ,在 弹出 菜单 中 选择 “粘贴 帧 命令; 右 击 “ 遮 蛙 ” 层 的 第 201 帧 ,在 
弹出 菜单 中 选择 “粘贴 帧 ”命令 。 

(4) 按照 第 (3) 步 的 做 法 ,将 “ 左 轴 ” 图 层 和 “ 右 轴 ”图 层 的 第 1 一 第 100 帧 复制 粘贴 到 本 
图 层 的 第 101 一 第 200 帧 .第 201 一 第 300 帧 。 

6. 完成 遮 章 效果 

选中 * 遮 淖 ? 层 ,将 图 层 属性 设置 为 * 遮 淖 层 ”。 预 览 动画 ,已 经 完成 了 3 幅 图 片 交替 展现 
的 动画 效果 。 

7. 添加 按钮 

(1) 在 动画 的 最 顶层 新 建 一 个 “按钮 "图 层 。 

(2) 在 “公共 库 ? 面 板 中 挑选 一 个 喜欢 的 按钮 元 件 拖 人 “按钮 ?图 层 的 第 1 帧 。 在 “ 库 ” 面 
板 中 选中 按钮 元 件 , 使 用 "编辑 ?按钮 对 按钮 元 件 进行 编辑 ,修改 按钮 的 标题 文本 为 “返回 ”。 

(3) 在 场景 中 选中 按钮 元 件 实例 ,在 “属性 ”面板 中 设置 “实例 名 称 ” 为 an1。 打 开 “ 动 作 ” 
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面板 ,在 “全 局 函数 ?|* 影 片 剪辑 控制 "中 选择 on 命令 ,on 命令 事件 参数 选择 press; 在 “浏览 
器 /网 络 ” 中 选择 getURL ,getURL 参数 中 填写 栏目 首页 文件 名 prac6. html。“ 动 作 ” 面 板 中 
的 脚本 内 容 为 : 

on (press) { 

getURL( "prac6. html"); 

} 

8. 发 布 动画 

保存 源 文件 到 本 地 站 点 中 flashes 目录 下 。 在 “文件 ”|“ 发 布设 置 " 中 确认 发 布 的 文件 格 
式 为 Flash(. swf) 和 HTML ,确认 HTML 文件 的 发 布 路 径 为 本 地 站 点 根 目录 中 ,文件 名 为 
prac6-1. html,Flash(. swf) 文件 的 发 布 路 径 为 本 地 站 点 根 目 录 下 flashes 目录 中 ,发 布 
动画 。 


6.6 “探索 太空 ”动画 网 页 制作 


6.6.1 任务 分 析 


本 任务 是 制作 “Flash 动画 ”栏目 中 的 “探索 太空 ”动画 网 页 。 本 任务 是 一 个 包含 两 个 场 
景 的 交互 式 动画 。 该 任务 中 设计 的 动画 效果 是 : 在 “火箭 发 射 "场景 中 , 当 单 击 一 次 “火箭 发 
射 "按钮 后 ,完成 一 次 火箭 发 射 过 程 ; 当 单 击 “ 飞 船 飞行 ”按钮 后 , 转 到 “飞船 飞行 ”场景 中 运 
行 。 在 “飞船 飞行 "场景 中 单 击 " 返 回 " 按 钮 才能 返回 “火箭 发 射 " 场 景 ,在 “火箭 发 射 "场景 中 
单 击 “ 结 束 ” 按 钮 返回 栏目 首页 。 

本 任务 中 包含 多 场景 动画 ,轨迹 动画 和 使 用 脚本 控制 动画 交互 。 该 任务 中 使 用 的 素材 
包括 images 目录 下 的 tp6-6. jpg、tp6-7. gif、tp6-8. jpg、tp6-9. gif 图 片 。 

6.6.2 ” 穆 索 太空 " 动画 网 页 制作 

1. 添加 场景 

(1) 新 建 Flash 文档 ,按照 设计 要 求 , 舞 台大 小 为 800X600px, 帧 频 为 12fps。 

(2) 使 用 “窗口 ”1“ 其 他 面板 ”1“ 场 景 "命令 打开 “场景 "面板 ,在 “场景 "面板 中 修改 * 场 
景 1” 为 “火箭 发 射 ”。 

(3) 在 “场景 "面板 中 使 用 “添加 场景 ”按钮 添加 一 个 场景 ,场景 命名 为 “飞船 飞行 ”。 

2.“ 火 箭 发 射 "场景 动画 制作 

(1) 选择 “火箭 发 射 ”场景 。 

(2) 将 图 层 名 称 修改 为 “背景 "。 导 入 images\tp6-6. jpg、tp6-7. gif、tp6-8. jpg、tp6-9. gif 
到 “ 库 ” 中 ,将 图 片 tp6-6. jpg 从 * 库 ?面板 中 拖 和 到“ 背景” 层 第 1 帧 ,在 第 40 帧 插入 静止 帧 ， 
锁定 该 图 层 。 

(3) 新 建 “火箭 ”图 层 , 将 图 片 tp6-7. gif 从 “ 库 ” 面 板 中 拖 入 到 “火箭 ” 层 第 1 帧 ,将 图 片 
转换 成 元 件 “ 火 箭 ”, 将 “火箭 ”元 件 实 例 放 置 到 舞台 的 左下 角 ; 在 第 40 帧 插入 关键 帧 ,将 * 火 
箭 ? 元 件 实例 放置 到 舞台 的 右上 和 角 外 面 ,并 将 “火箭 ?元 件 实例 旋转 90" 水 平 放 置 。 

(4) 新 建 引导 层 ,在 引导 层 内 使 用 椭圆 工具 绘制 一 个 无 填充 色 的 椭圆 ,使 用 “橡皮 擦 ” 工 
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具 在 椭圆 适当 的 部 位 擦 两 个 口 , 留 下 需要 的 一 段 圆 弧 作 引 导线 ,删除 不 要 的 圆 弧 。 使 用 选择 
工具 调整 弧 线 ,使 其 更 像 一 条 火箭 发 射 轨迹 。 

(5) 选中 “火箭 " 层 第 1 帧 ,将 “火箭 ”元 件 实 例 中 心 点 对 准 导线 ; 选中 “火箭 ” 层 第 40 帧 ， 
将 “火箭 ”元 件 实例 中 心 点 对 准 导线 ,在 “火箭 ” 层 创建 补 间 动 画 。 拖 动 播放 头 , 火 箭 应 该 沿 导 
线 运动 。 

(6) 调整 火箭 姿态 。 在 “火箭 ” 层 中 插入 一 些 关 键 帧 ,选中 各 个 关键 帧 ,使 用 任意 变形 工 
具 调 整 该 关键 帧 中 火箭 的 姿态 与 导线 成 切线 方向 。 

(7) 添加 按钮 。 在 动画 顶层 新 建 “ 脚 本 ”图 层 。 从 “公共 库 ? 面 板 中 挑选 一 个 喜欢 的 按钮 
元 件 拖 人 “脚本 ”图 层 的 第 1 帧 ,放置 在 舞台 下 方 适当 位 置 。 在 * 库 ?面板 中 选中 按钮 元 件 , 使 
用 “编辑 ”按钮 对 按钮 元 件 进行 编辑 ,删除 其 文本 层 。 选 中 按钮 元 件 实例 ,在 “属性 ”面板 中 命 
名 按钮 元 件 实例 名 称 为 button1 ,使 用 文本 工具 在 buttonl 按钮 上 书写 标题 “火箭 发 射 >。 再 
拖 人 2 个 按钮 元 件 实例 和 buttonl 并 列 摆 放 ,命名 为 button2、button3, 使 用 文本 工具 在 
button2 .button3 按钮 上 分 别 书写 标题 “飞船 飞行 " “结束 ”。 

(8) 添加 交互 脚本 。 

@ 选中 * 脚 本 ”图 层 的 第 1 帧 ,打开 * 动 作 ?面板 ,在 “全 局 函数 "|* 时 间 轴 控制 ?中 选择 
stop ,在 脚本 窗口 中 的 脚本 代码 为 ， 


stop(); 


@ 在 “脚本 ”图 层 的 第 40 帧 插入 空白 关键 帧 ,选中 第 40 帧 ,打开 “动作 ”面板 ,在 “全 局 
函数 ”|* 时 间 轴 控制 "中 选择 gotoAndPlay, 在 脚本 窗口 中 的 脚本 代码 为 : 


gotoAndPlay( ); 


该 函数 是 转 到 某 处 去 播放 ,在 这 里 的 “( )” 中 填写 “1”, 即 转 到 本 场景 的 第 1 帧 去 播放 ， 
最 终 的 脚本 代码 为 : 


gotoAndPlay(1); 


在 前 面 为 第 1 帧 和 第 40 帧 添加 了 时 间 轴 控制 脚本 代码 后 ,该 动画 打开 后 不 会 播放 ,要 
播放 该 场景 动画 需要 添加 交互 命令 。 该 场景 动画 开始 播放 后 , 当 播放 到 该 场 最 后 一 帧 时 ， 
在 多 场景 动画 中 ,会 自动 进入 下 一 场 播放 。 但 是 ,在 该 场 第 40 帧 添加 了 gotoAndPlay(1) 
脚本 后 ,从 该 帧 将 转 到 本 场 的 第 1 帧 播放 。 当 然 ,在 该 场 第 1 帧 中 有 stop() 脚 本 , 即 停止 
播放 。 

@ 选中 按钮 元 件 实例 buttonl( 火 箭 发 射 ) ,打开 * 动 作 ? 面 板 ,在 “全 局 函数 "| “影片 剪辑 
控制 ?中 选择 on 命令 ,on 命令 事件 参数 选择 press; 在 “全 局 函数 ”1“ 时 间 轴 控制 ”中 选择 
play, 在 脚本 窗口 中 的 脚本 代码 为 : 

on (press) { 

Play(); 

} 

即 在 单 击 该 按钮 时 将 播放 火箭 发 射 的 动画 ,但 是 由 于 第 1 帧 中 有 stopO 〇 脚本 , 单 击 “ 炎 
箭 发 射 "按钮 后 ,动画 只 能 播放 一 遍 ,不 能 循环 播放 。 

@ 选中 按钮 元 件 实例 button2( 飞 船 飞行 ) ,打开 * 动 作 ? 面 板 ,打开 * 脚 本 助手 窗口 ,在 
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“全 局 函数 "| "影片 剪辑 控制 "中 选择 on 命令 ,在 “全 局 函数 ”|“ 时 间 轴 控制 ”中 选择 goto 命 
令 , 在 如 图 6-53 所 示 的 “脚本 助手 ”窗口 中 ,“ 场 景 ”选择 “飞船 飞行 ”,“ 帧 "选择 “1”。 生 成 的 
脚本 代码 为 : 

on (release) { 


gotoAndPlay(" 飞 船 飞行 ", 1); 
} 


即 单 击 “ 飞 船 飞行 ”按钮 时 将 转 到 “飞船 飞行 ”场景 的 第 1 帧 播放 。 


ActionSeript 1.0&2.0 ~ | goto ; 苇 到 影片 指定 的 巾 


@ getProperty 


sl 


FE 所 各 
6-53 在 “脚本 助手 "窗口 中 选择 场景 


| 


名 reet bevel aa 


@ 选中 按钮 元 件 实例 button3( 结 束 ) ,打开 “动作 ”面板 ,在 “全 局 函数 ”| * 影 片 剪辑 控 
制 " 中 选择 on 命令 ,on 命令 事件 参数 选择 press; 在 “浏览 器 /网 络 ” 中 选择 getURL， 
getURL 参数 中 填写 栏目 首页 文件 名 prac6. html。“ 动 作 ” 面 板 中 的 脚本 内 容 为 : 

on (press) { 


getURL( "pracé. html"); 
} 


3.“ 飞 船 飞 行 ”场景 动画 制作 

(1) 选择 “飞船 飞行 "场景 ,将 图 层 名 称 修改 为 “背景 "。 将 图 片 tp6-8. jpg 从 “ 库 ” 面 板 中 
拖 入 到 “背景 " 层 第 1 帧 ,在 第 40 帧 插入 静止 帧 ,锁定 该 图 层 。 

(2) 新 建 “飞船 ”图 层 , 将 图 片 tp6-9. gif 从 * 库 ?面板 中 拖 人 到 “飞船 ? 层 第 1 帧 ,将 图 片 
转换 成 元 件 “ 飞 船 ”, 将 “飞船 ”元 件 实例 放 管 到 舞台 的 左下 角 ; 在 第 40 帧 插入 关键 帧 ,将 “ 飞 
船 ”元 件 实例 放置 到 舞台 的 右上 角 外 面 。 

(3) 参照 “火箭 发 射 "场景 动画 中 轨迹 动画 的 制作 方法 ,制作 飞船 飞行 的 轨迹 动画 ,调整 
飞船 的 不 同 点 飞行 姿态 。 

(4) 添加 按钮 。 新 建 “脚本 ”图 层 , 从 “公共 库 ” 面 板 中 挑选 一 个 喜欢 的 按钮 元 件 抑 入 “上牌 
本 ”图 层 的 第 1 帧 ,放置 在 舞台 下 方 适 当 位置 。 编 辑 按钮 元 件 实例 的 标题 ,将 标题 修改 为 “ 返 
回 ”, 给 按钮 元 件 实例 命名 为 button4。 
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(5) 添加 脚本 。 
g@ 在 “脚本 ”图 层 的 第 40 帧 插入 空白 关键 帧 ,选中 第 40 帧 ,打开 “动作 ”面板 ,在 “全 局 
函数 ”|“ 时 间 轴 控制 ”中 选择 gotoAndPlay, 修 改 脚本 窗口 中 的 脚本 代码 为 ， 


gotoAndPlay(1); 


即 该 场景 动画 播放 到 最 后 一 帧 后 , 转 到 本 场景 第 1 帧 播放 ,而 不 是 从 动画 开头 播放 。 

@ 选中 按钮 元 件 实例 ,打开 “动作 ”面板 ,打开 “ 牌 本 助手 ”, 在 “全 局 函数 ”|“ 影 片 剪 辑 控 
制 ? 中 选择 on, 在 “全 局 函数 ”|“ 时 间 轴 控制 ”中 选择 goto, 在 “脚本 助手 "窗口 中 ,“ 场 景 "选择 
“火箭 发 射 ”",“ 帧 "选择 “1”。 生 成 的 脚本 代码 为 : 

on (release) { 

gotoAndPlay(" 火 箭 发 射 ", 1); 

} 

即 在 “飞船 飞行 ?场景 中 单 击 “返回 ?按钮 时 ,动画 返回 到 动画 开头 “火箭 发 射 ?场景 的 第 
1 帧 播放 。 

4. 发 布 动画 

保存 源 文件 到 本 地 站 点 中 flashes 目录 下 。 将 prac6-1. html 发 布 到 本 地 站 点 根 目录 中 ; 
将 prac6-1. swf 文件 发 布 到 本 地 站 点 根 目录 下 flashes 目录 中 。 


6.7 “思念 朋友 ”动画 网 页 制作 


6.7.1 任务 分 析 


本 任务 是 制作 “Flash 动画 ”栏目 中 的 “思念 朋友 ”动画 网 页 。 本 动画 设计 效果 可 以 参阅 
教学 项 目 网 站 。 该 任务 中 包含 了 形变 动画 运动 动 画 、 遮 罩 动 画 、 影 片 前 辑 和 声音 等 。 动 画 
中 使 用 的 素材 图 片 为 images 目录 中 的 tp6-11. jpg、tp6-12. jpg 和 tp6-13. jpg 和 tp6-10. jpg。 

该 任务 中 包含 了 多 个 简单 动画 ,是 一 个 综合 应 用 Flash 制作 技术 的 动画 作品 。 


6.7.2 ”思念 朋友 " 动画 网 页 制作 


1. 背景 制作 

(1) 新 建 Flash 文档 ,舞台 大 小 800X600px; 背景 为 黑色 , 帧 频 为 12fps。 

(2) 修改 图 层 名 称 为 “背景 ”。 

(3) 下 载 一 个 歌曲 导入 到 * 库 ?中 作 背 景 音乐 ,将 背景 音乐 拖 和 人 到 背景 层 ,同步 设置 为 
“开始 ”。 在 背景 层 第 500 帧 插入 静止 帧 。 

(4) 在 舞台 中 央 绘制 550X400px 的 矩形 ,放射状 渐 变 填充 ,填充 色 使 用 # 003366 和 黑 
色 。 调 整 填充 区 域 ,将 高 光 中 心 调整 到 矩形 的 偏 下 方 。 

2. shine-star 影片 编辑 元 件 制作 

(1) 制作 图 形 元 件 star。 

@ 在 * 库 ?面板 中 新 建 图 形 元 件 doc, 在 元 件 编辑 窗口 中 心 绘制 一 个 8X8px 的 白色 正 圆 
图 形 。 返 回 到 场景 ,结束 元 件 制作 。 
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@ 在 “ 库 ” 面 板 中 新 建 图 形 元 件 star, 在 元 件 编辑 窗口 中 心 绘制 一 个 白色 填充 、30 X 


口中 心 再 绘制 一 个 白色 填充 ,50X50px 的 四 角 星 形 , 星 形 顶 点 为 0. 1。 两 个 四 角 星 形 中 心 
对 准 元 件 编辑 窗口 中 心 。 

@ 从 * 库 ?面板 中 拖 入 一 个 doc 元 件 实例 ,doc 元 件 实例 中 心 对 准 四 角 星 形 中 心 。 在 “ 属 
性 ”面板 中 设置 doc 元 件 实例 的 Alpha 属性 为 50%。 

@ 返回 到 场景 ,结束 元 件 制作 。 

(2) 制作 影片 剪辑 元 件 shine-starl 。 

g@ 在 * 库 ?面板 中 新 建 影 片 剪 辑 元 件 shine-starl。 

@ 从 * 库 ?面板 中 拖 和 人 一 个 star 元 件 实例 到 图 层 1 第 1 帧 ,调整 star 元 件 实例 大 小 为 
20X20px',star 元 件 实例 中 心 对 准 元 件 编辑 窗口 中 心 。 在 第 10 帧 插入 关键 帧 ,在 第 20 帧 插 
入 静止 帧 。 

@ 在 图 层 1 第 5 帧 插入 空白 关键 帧 ,从 * 库 ?面板 中 再 拖 入 一 个 star 元 件 实例 到 图 层 1 
第 5 帧 ,使 star 元 件 实例 中 心 对 准 元 件 编辑 窗口 中 心 。 

@ 在 第 1 一 第 10 帧 之 间 创 建 补 间 动 画 , 返 回 到 场景 ,结束 元 件 制作 。 

(3) 制作 影片 剪辑 元 件 shine-star2 。 

为 了 制作 出 星光 不 同步 闪烁 的 效果 ,还 需要 制作 一 个 与 剪辑 元 件 shine-starl 有 形态 差 
异 的 影片 剪辑 元 件 shine-star2 。 

g@ 在 * 库 ?面板 中 新 建 影片 剪辑 元 件 shine-star2 。 

@ 从 * 库 ?面板 中 拖 人 一 个 star 元 件 实例 到 图 层 1 第 1 帧 。 使 用 任意 变形 工具 让 star 
元 件 实例 旋转 45° ,调整 star 元 件 实例 大 小 为 15X15px, 使 star 元 件 实例 中 心 对 准 元 件 编辑 
窗口 中 心 。 在 第 5 帧 .第 15 帧 插入 关键 帧 ,在 第 25 帧 插入 静止 帧 。 

@ 在 图 层 1 第 10 帧 插入 空白 关键 帧 ,从 * 库 ?面板 中 再 拖 和 一 个 star 元 件 实例 到 图 层 1 
第 10 帧 。 使 用 任意 变形 工具 让 star 元 件 实例 旋转 45" ,使 star 元 件 实例 中 心 对 准 元 件 编辑 
窗口 中 心 。 

@ 在 第 5 一 第 15 帧 之 间 创 建 补 间 动画 ,返回 到 场景 ,结束 元 件 制作 。 

3. 制作 星光 闪烁 夜景 

新 建 < 星空 "图 层 文 件 夹 ,在 文件 夹 中 新 建 5 个 图 层 s1、s2、s3、s4、s5, 在 每 个 图 层 中 放 管 
一 个 shine-starl 或 shine-star2 影片 剪辑 实例 。 注 意 不 要 只 使 用 shine-starl 或 shine-star2 一 个 
影片 剪辑 ,尽量 均匀 使 用 。 将 各 个 影片 前 辑 实例 放置 到 适当 的 位 置 , 折 释 “星空 "图 层 文件 夹 。 

预览 动画 ,可 以 看 到 星光 闪烁 的 夜空 。 

4. 文字 运动 动画 制作 

(1) 制作 影片 剪辑 元 件 friends。 在 “ 库 ? 面 板 中 新 建 影 片 剪 辑 元 件 friends。 在 元 件 编 
辑 窗 口中 使 用 文字 工具 书写 文字 “Friends...”, 字 体 选 择 “Edwardian Script ITC”, 颜 色 使 
白色 ,大 小 使 用 100px。 

(2) 文字 运动 动画 制作 。 

Q@ 新 建 图 层 friends, 从 “ 库 ” 面 板 中 拖 入 影片 剪辑 元 件 friends 到 friends 图 层 第 1 帧 ， 
在 friends 图 层 第 20 帧 .第 50 帧 .第 70 帧 插入 关键 帧 。 

@ 选中 friends 图 层 第 1 帧 , 单 击 friends 影片 剪辑 实例 ,在 “属性 ?面板 中 设置 friends 
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影片 剪辑 实例 Alpha 属性 为 0%; 在 “ 滤 镜 "面板 中 为 friends 影片 剪辑 实例 添加 发 光 滤 镜 ， 
“模糊 ” 值 选 择 “0”, 发 光 颜 色 选 择 白色 。 

@ 选中 friends 图 层 第 20 帧 , 单 击 friends 影片 剪辑 实例 ,在 “属性 ”面板 中 设置 friends 
影片 剪辑 实例 Alpha 属性 为 100%; 在 “ 滤 镜 ”面板 中 为 friends 影片 剪辑 实例 添加 发 光 滤 
镜 ,“ 模 糊 ” 值 选择 “50”, 发 光 颜 色 选 择 白色 ; 再 添加 模糊 滤 镜 ,“ 模 糊 ” 值 选择 “0”。 

@ 选中 friends 图 层 第 50 帧 , 单 击 friends 影片 剪辑 实例 ,在 “属性 ?面板 中 设置 friends 
影片 剪辑 实例 Alpha 属性 为 100%; 在 “ 滤 镜 ”面板 中 为 friends 影片 剪辑 实例 添加 发 光 滤 
镜 ， 模 糊 ? 值 选择 *0” ,发 光 颜色 选择 白色 ; 再 添加 模糊 滤 镜 ,“ 模 糊 ” 值 选择 “5”。 

@ 选中 friends 图 层 第 70 帧 , 单 击 friends 影片 剪辑 实例 ,在 “属性 ?面板 中 设置 friends 
影片 剪辑 实例 Alpha 属性 为 0%; 在 “ 滤 镜 ”面板 中 为 friends 影片 剪辑 实例 添加 发 光 滤 镜 ， 
“模糊 ” 值 选 择 “0”, 发 光 颜 色 选 择 白色 ; 再 添加 模糊 滤 镜 ,模糊 ” 值 选择 “0”。 使 用 “窗口 ”| 
“变形 ”命令 打开 “变形 "面板 ,将 friends 影片 剪辑 实例 水 平 倾斜 80" ,并 向 右上 方 移动 一 段 
距离 。 

@ 选中 friends 图 层 的 第 1 一 第 70 帧 ,创建 补 间 动 画 。 

5. 拉 镜 头 效果 动画 制作 

在 摄影 技术 中 把 通过 摄像 机 后 移 或 变 小 焦距 使 取景 范围 和 表现 空间 从 小 到 大 不 断 扩 
展 、 拍 摄 主体 向 远 处 移动 的 拍摄 效果 称 作 ”* 拉 镜头 ”。 动 画 中 在 “Friends.…" 文 字 消失 后 ,有 

-个 窗户 出 现 . 星 空 向 远 处 移动 的 动画 ,类 似 摄像 拉 镜 头 的 效果 。 该 动画 制作 步骤 如 下 : 

(1) 制作 图 形 元 件 window。 

@ 导入 tp6-10.jpg 到 * 库 ?中 ,在 “" 库 ?面板 新 建 图 形 元 件 window。 

@ 在 元 件 编辑 窗口 中 ,使 用 矩形 工具 绘制 一 个 800X 600px 的 无 边线 矩形 ,使 用 "位 图 ” 
填充 ,填充 位 图 选择 tp6-10. jpg; 再 绘制 一 个 740X540px 的 无 边线 红色 填充 矩形 块 放 置 在 
位 图 填充 矩形 块 的 正中 央 ( 上 下 ,左右 对 称 ), 如 图 6-54(a) 所 示 。 选 中 红色 矩形 块 ,使 用 
Delete 键 删除 中 间 红 色 矩形 块 ,得 到 窗户 边框 如 图 6-54(b) 所 示 。 


得 WU 


ET FH HE SD 2 
(a) 两 个 矩形 块 


(b) 删除 中 间 和 矩形 块 
6-54 窗户 边框 制作 


@ 制作 窗 扇 。 使 用 矩形 工具 绘制 一 个 180X 540px 的 无 边线 矩形 ,使 用 “位 图 ?填充 , 填 
充 位 图 选择 tp6-10. jpg; 再 绘制 两 个 140X 240px 的 红色 填充 无 边线 矩形 放置 在 位 图 填充 
和 矩形 块 上 面 适当 位 置 ,如 图 6-55(a) 所 示 ; 删除 红色 矩形 块 后 得 到 的 图 形 如 图 6-55(b) 所 示 ; 
使 用 选择 工具 将 上 下 边框 的 右边 内 拐点 向 里 拖 动 一 段 ,如 图 6-55(c) 所 示 ; 再 将 上 下 边框 的 
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右边 外 拐点 向 里 拖 动 形成 如 图 6-55(d) 所 示 图 形 ,完成 一 扇 窗 扇 的 制作 。 


(a) (b) (ec) (d) 
图 6-55 窗 扇 制 作 过 程 


@ 将 制作 好 的 窗 扇 图 形 放置 到 窗 框 里 面 靠 左 边 窗 框 ,复制 .粘贴 一 个 窗 扇 图 形 ,使 用 
“修改 "|* 变 形 ”|* 水 平 翻转 ?命令 将 复制 出 的 窗 扇 图 形 水 平 翻 转 , 放 置 到 窗 框 里 面 靠 右边 
窗 框 。 

加 返回 到 场景 ,结束 window 图 形 元 件 制作 。 

(2) 制作 ” 图 形 元 件 。 在 “ 库 ? 面 板 中 新 建 图 形 元 件 “ 窗 从 4 窗口 中 使 
用 矩形 工具 绘制 一 个 白色 填充 100X 600px 的 无 边线 矩形 ,如 图 6-56(a) 所 示 ; 使 用 选择 工 
具 将 矩形 拉 成 梯形 形状 ,如 图 6-56(b) 所 示 ; 使 用 任意 变形 工具 中 的 “封套 "编辑 ,将 梯形 上 
下 边线 编辑 成 如 图 6-56(c) 所 示 的 形状 


| [| 
(a) (b) 


图 6-56 “窗帘 ”图 形 元 件 制作 过 程 
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返回 到 场景 ,结束 元 件 制作 。 

(3) 制作 “晃动 窗帘 ”影片 剪辑 。 

@ 在 “ 库 ” 面 板 中 新 建 影片 剪辑 元 件 “ 晃 动 窗帘 ”。 

@ 在 图 层 1 第 1 帧 拖 入 一 个 “窗帘 ”图 形 元 件 , 使 用 任意 变形 工具 将 “窗帘 ”元 件 实例 中 
心 点 移动 到 元 件 实例 顶部 ,在 “属性 ?面板 设置 Alpha 属性 为 50%; 在 第 15 帧 .第 25 帧 插入 
关键 帧 ,在 第 40 帧 插入 莲 止 帧 。 选 中 第 15 帧 ,将 “窗帘 ”元 件 实例 底部 向 右 旋转 一 个 角度 。 
在 第 1 一 第 25 帧 之 间 创 建 补 间 动 画 。 

@ 新 建 图 层 2, 在 图 层 2 第 1 帧 拖 和 一 个 “窗帘 ?图 形 元 件 ,放置 在 前 一 个 “窗帘 ?元 件 实 
例 左边 ,与 前 一 个 “窗帘 ”元 件 实例 重 释 80%。 使 用 任意 变形 工具 将 “窗帘 ”元 件 实例 中 心 点 
移动 到 元 件 实例 顶部 ,在 “属性 ?面板 设置 Alpha 属性 为 50%; 在 第 10 帧 第 30 帧 插入 关键 
帧 ,在 第 40 帧 插入 静止 帧 。 选 中 第 10 帧 ,将 “窗帘 ?元 件 实例 底部 向 左旋 转 一 个 角度 。 在 
第 1 一 第 30 帧 之 间 创 建 补 间 动 画 。 

@ 新 建 图 层 3 ,在 图 层 3 第 1 帧 拖 和 人 一个“ 窗帘? 图形 元 件 ,放置 在 前 两 个 “窗帘 ?元 件 实 
例 中 间 。 使 用 任意 变形 工具 将 窗帘? 元件 实例 中 心 点 移动 到 元 件 实例 顶部 ,在 “属性 ”面板 
设置 Alpha 属性 为 70% ,将 元 件 宽度 调整 为 100px; 在 第 5 帧 ,第 15 帧 ,第 25 帧 第 35 帧 
插入 关键 帧 ,在 第 40 帧 插入 静止 帧 。 选 中 第 5 帧 ,将 “窗帘 "元件 实例 底部 向 左旋 转 一 个 角 
度 ; 选中 第 25 帧 ,将 “窗帘 ”元 件 实例 底部 向 右 旋 转 一 个 角度 。 在 第 1 一 第 35 帧 之 间 创 建 补 
间 动 画 。 

返回 到 场景 ,结束 元 件 制作 。 

(4) 制作 窗户 。 

Q@ 新 建 “ 窗 口 ?图 层 文件 夹 ,在 “窗口 ?图 层 文件 夹 中 新 建 “ 窗 ”图 层 , 在 “ 窗 "图 层 第 71 帧 
插入 空白 关键 帧 ,从 * 库 ?面板 中 拖 和 人 window 图 形 元 件 。 

@ 在 “窗口 "图 层 文件 夹 中 新 建 图 层 “ 右 帘 ”, 在 “ 右 帘 ”图 层 第 71 帧 插入 空白 关键 帧 ,从 
“ 库 ? 面 板 中 拖 人 “晃动 窗帘 ?影片 剪辑 元 件 放置 在 窗口 右边 。 

@ 在 “窗口 ?图 层 文件 夹 中 新 建 图 层 “ 左 帘 ”， 
在 * 左 帘 ? 图 层 第 71 帧 插入 空白 关键 帧 ,从 * 库 ” 
面板 中 拖 入 “晃动 窗帘 ?影片 剪辑 元 件 放 置 在 窗 
口 左边 ,使 用 "修改 "| 变形?|* 水 平 翻转 ”命令 将 
影片 剪辑 实例 水 平 翻转 ,调整 位 置 。 

制作 好 的 窗户 图 形 如 图 6-57 所 示 。 

(5) 拉 镜 头 效果 动画 制作 。 

OO 在 * 窗 ”图 层 在 第 100 帧 插入 关键 帧 ,将 
window 元 件 实例 调整 为 550 X 400px, 放 置 在 舞 
台中 央 。 在 第 71 一 第 100 帧 之 间 创 建 补 间 动 画 。 

@ 在 “ 右 帘 ?图 层 第 100 帧 插入 关键 帧 ,将 “晃动 窗帘 ?影片 剪辑 实例 调整 为 130 X 
420px, 放 置 在 窗口 的 适当 位 置 。 在 第 71 一 第 100 帧 之 间 创 建 补 间 动 画 。 

@ 在 “ 左 帘 ?图 层 第 100 帧 插入 关键 帧 ,将 “晃动 窗帘 ”影片 剪辑 实例 调整 为 130 X 
420px, 放 置 在 窗口 的 适当 位 置 。 在 第 71 一 第 100 帧 之 间 创 建 补 间 动 画 。 

@ 在 “窗口 ?图 层 文 件 夹 中 “ 左 帘 ?图 层 上 面 新 建 图 层 , 在 新 建 图 层 的 第 71 帧 插入 空白 


图 6-57 窗户 图 形 
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关键 帧 ,绘制 一 个 红色 550X400px 的 无 边线 矩形 ,矩形 位 置 和 * 窗 ”图 层 第 100 帧 的 窗户 对 
齐 。 将 该 图 层 设置 为 “ 遮 淖 层 ”; 选中 “ 右 帘 ”图 层 ,双击 图 层 图 标 ,在 “图 层 属性 "窗口 中 将 
“ 右 帘 ?图 层 设 置 为 “被 遗 单 ”; 选中 “ 窗 ” 图 层 , 双 击 图 层 图 标 ,在 “图 层 属性 ”窗口 中 将 “ 窗 ” 图 
层 设置 为 “被 谈 蛙 ”。 

折 生 并 锁定 “窗口 ”图 层 文件 夹 。 

@ 打开 “星空 "图 层 文件 夹 , 在 sl 图 层 第 71 帧 .第 100 帧 插入 关键 帧 。 选 中 第 100 帧 ， 
将 影片 剪辑 实例 向 右上 方 移动 ,并 适当 缩小 ,在 第 71 一 第 100 帧 之 间 创 建 补 间 动 画 。 仿 照 
sl 图 层 的 方法 对 s2、s3、s4、s5 图 层 制作 影片 剪辑 实例 向 右上 方 移动 ,并 适当 缩小 动画 。 

@ 在 “星空 ”图 层 文件 夹 中 插入 s6\s7 图 层 , 在 s6 图 层 的 第 71 帧 插入 空白 关键 帧 , 拖 人 
一 个 shine-star2 影片 剪辑 实例 放置 在 窗口 左 侧 , 在 第 100 帧 插入 关键 帧 。 选 中 第 100 帧 ， 
将 影片 剪辑 实例 向 右上 方 移动 ,并 适当 缩小 ,在 第 71 一 第 100 帧 之 间 创 建 补 间 动 画 。 在 s7 
图 层 中 仿照 s6 图 层 再 添加 一 个 星星 移入 到 窗口 中 的 动画 ,展现 取景 范围 从 小 到 大 扩展 的 
“ 拉 镜 头 ” 效 果 。 

折 秋 并 锁定 “星空 "图 层 文件 夹 。 

6.“ 有 朋友” 照片 显示 动画 制作 

(1) 导入 素材 图 片 images\tp6-11. jpg、tp6-12. jpg、tp6-13. jpg 到 “ 库 ” 中 ,新 建 “朋友 ”图 
层 文件 夹 。 

(2) 朋友 1 照片 显示 动画 制作 。 

Q@ 在 “朋友 ”图 层 文件 夹 中 新 建 图 层 pl 。 

@ 在 pl 图 层 第 100 帧 插入 空白 关键 帧 ,将 图 片 tp6-11. jpg 从 * 库 ?面板 中 拖 入 放置 到 
窗口 中 ,调整 图 片 的 位 置 与 大 小 。 

@ 将 图 片 转换 为 图 形 元 件 pl, 在 第 140 帧 .第 180 帧 插入 关键 帧 。 选 中 pl 图 层 第 100 
帧 ,在 “属性 ?面板 中 设置 pl 元 件 实例 的 Alpha 属性 为 0%; 选中 第 180 帧 ,将 pl 元 件 实例 
的 Alpha 属性 设置 为 0%。 在 pl 图 层 第 100 一 第 180 帧 之 间 创 建 补 间 动 画 。 

@ 在 “p1” 图 层 上 面 新 建 图 层 , 在 新 建 图 层 第 100 帧 插入 空白 关键 帧 ,在 相对 “p1” 图 层 
中 照片 头 部 的 中 心 位 置 绘制 一 个 无 边线 的 小 圆 形 ; 在 该 图 层 第 140 帧 插入 空白 关键 帧 , 绘 
制 一 个 适当 大 小 的 五 角 星 形 , 星 形 顶 点 大 小 设置 为 1, 调整 星 形 与 pl 图 层 中 照片 头 部 的 相 
对 位 置 。 选 中 该 图 层 第 100 帧 ,创建 形变 动画 。 设 置 该 图 层 为 “ 遮 音 层 ”。 

(3) 朋友 2 照片 显示 动画 制作 。 

g@ 在 “朋友 ”图 层 文 件 夹 新 建 图 层 p2。 

@ 在 p2 图 层 第 100 帧 插入 空白 关键 帧 ,将 图 片 tp6-12. jpg 从 * 库 ?面板 中 拖 和 人 放置 到 
窗口 中 ,调整 图 片 的 位 置 与 大 小 。 

@ 仿照 朋友 1 照片 显示 动画 制作 方法 制作 朋友 2 照片 显示 动画 。 

(4) 影片 前 辑 谈 日 动 画 制 作 。 

Q@ 在 * 库 ?面板 中 新 建 影 片 剪 辑 元 件 * 遮 单元 件 ”。 

@ 在 元 件 编辑 窗口 图 中 打开 “标尺 ”显示 ,从 标尺 中 拖 出 6 条 辅助 线 , 围 绕 元 件 中 心 形 
成 一 个 200X200px 的 * 田 ? 字 格 ,如 图 6-58 所 示 。 

@ 选中 图 层 1 第 1 帧 ,在 “ 田 ” 字 格 的 一 个 格 中 心 绘制 一 个 白色 无 边线 小 圆 形 ; 新 建 图 
层 2、 图 层 3、 图 层 4, 在 每 个 图 层 的 第 1 帧 中 绘制 一 个 白色 无 边线 小 圆 形 , 分 别 放置 到 * 田 ” 


图 6-58 由 辅助 线形 成 的 * 田 " 字 格 


字 格 各 个 格 内 ,如 图 6-58 所 示 。 
@ 选中 图 层 1, 在 第 40 帧 插入 关键 帧 ,将 圆 形 调整 为 120X120px, 圆 形 边线 与 “ 田 ” 字 
格 边线 相 切 。 选 择 第 1 帧 ,创建 形变 动画 。 在 第 80 帧 插入 静止 帧 。 


@ 仿照 图 层 1 的 做 法 ,完成 其 他 三 个 图 层 中 形变 动画 的 制作 。 返 回 到 场景 ,完成 “ 遮 单 
元 件 "影片 剪辑 的 制作 


@ 在 “朋友 ”图 层 文件 夹 中 新 建 p3 图 层 , 在 p3 图 层 第 180 帧 插入 空白 关键 帧 ,将 图 片 
tp6-13. jpg 从 * 库 ?面板 中 拖 和 人 放置 到 窗口 中 ,调整 图 片 的 位 置 与 大 小 。 

@ 将 图 片 tp6-13. jpg 转换 成 图 形 元 件 p3 ,在 第 220 帧 .260 帧 插入 关键 帧 。 选 中 p3 图 
层 第 180 帧 ,在 “属性 ?面板 中 设置 p3 元 件 实例 的 Alpha 属性 为 0%; 选中 第 260 帧 ,将 p3 
元 件 实例 的 Alpha 属性 设置 为 0% 。 在 p3 图 层 第 180 一 第 260 帧 之 间 创 建 补 间 动 画 。 

@ 在 “朋友 ”图 层 文件 夹 中 p3 图 层 上 面 新 建 pz 图 层 。 在 pz 图 层 第 180 帧 插入 空白 关 
键 帧 ,将 * 库 ?面板 中 的 元 件 ” 影 片 剪辑 拖 和 到 该 帧 ,放置 在 与 p3 图 层 中 的 照片 中 心 对 
应 的 位 置 。 设 置 pz 图 层 为 “ 遮 罩 层 ”。 

7. 逐 帧 遮 罩 动画 制作 

动画 最 后 的 文字 显示 使 用 了 打字 机 效果 。 这 种 效果 可 以 使 用 逐 帧 动画 实现 ,也 可 以 使 
用 逐 帧 遮 音 动画 实现 。 下 面 用 逐 帧 多 单 动画 来 实现 文字 显示 的 打字 机 效果 。 

在 遮 单 动画 中 ,如 果 遗 单元 件 的 变化 无 规律 可 循 ,就 只 能 使 用 逐 帧 遮 单 动画 。 所 谓 逐 帧 
遮 单 ,就 是 每 帧 中 根据 需要 设置 遮 单 元 件 的 形状 。 

(1) 解锁 p3 图 层 的 遮 单 ,被 谈 单 关系 。 

(2) 在 p3 图 层 的 第 261 帧 插入 空白 关键 帧 ,使 用 华文 新 魏 字 体 书写 60px 大 小 、 白 色 文 
字 “ 朋 友 啊 朋友 ,你 可 曾 想 起 了 我 ……”。 
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(3) 在 pz 图 层 的 第 261 帧 插入 空白 关键 帧 ,绘制 一 个 矩形 色 块 盖 住 “朋友 "文字 ,在 pz 
图 层 的 第 265 帧 .第 270 帧 .第 280 帧 .第 285 帧 .第 295 帧 .第 300 帧 .第 305 帧 .第 310 帧 、 
第 315 帧 .第 325 帧 分 别 插入 关键 帧 ,选中 各 个 关键 帧 ,修改 其 中 的 遮 单 元 件 , 使 其 遮 住 需要 
显示 出 的 文字 。 

(4) 设置 pz 图 层 属性 为 “ 遮 淖 层 ”, 创 建 遮 单 动画 。 

8. 添加 按钮 

(1) 在 动画 的 最 顶层 新 建 一 个 “按钮 "图 层 。 

(2) 在 “公共 库 ” 面 板 中 挑选 一 个 喜欢 的 按钮 元 件 拖 入 “按钮 "图 层 的 第 1 帧 。 在 “ 库 ” 面 
板 中 选中 按钮 元 件 ,使 用 “编辑 ”按钮 对 按钮 元 件 进行 编辑 ,修改 按钮 的 标题 文本 为 “返回 ”。 

(3) 在 场景 中 选中 按钮 元 件 实例 ,在 “属性 面板 "中 设置 “实例 名 称 ” 为 an-1。 打 开 “ 动 
作 ? 面 板 , 在 * 全 局 函数 "|* 影 片 剪辑 控制 "中 选择 on 命令 ,on 命令 事件 参数 选择 press; 在 
“浏览 器 /网 络 ” 中 选择 getURL,getURL 参数 中 填写 栏目 首页 文件 名 prac6. html。“ 动 作 ” 
面板 中 的 脚本 内 容 为 ; 

on (press) { 

getURL("prac6. html"); 

} 

9. 发 布 动画 

保存 源 文件 ,将 prac6-3. html 文件 发 布 本 地 站 点 根 目录 中 ,将 prac6-3. swf 文件 发 布 到 
本 地 站 点 根 目录 下 flashes 目录 中 。 


6.8 Flash 动画 栏目 首页 制作 


6.8.1 任务 分 析 


本 任务 是 完成 教学 项 目 网 站 中 “Flash 动画 ”栏目 首页 prac6. html 的 制作 ,这 是 一 个 由 
Flash 制作 的 动画 网 页 。 该 栏目 首页 中 除了 包含 导航 按钮 之 外 ,还 包含 一 个 文字 变化 的 形 
变动 画 和 一 叶 小 舟 在 江 中 划 过 的 运动 动画 。 在 划船 的 运动 动画 中 , 船 夫 的 划 桨 动作 需要 使 
用 影片 剪辑 完成 。 

本 任务 中 使 用 的 图 片 素材 为 images 目录 中 的 tp6-1.jpg。 


6. 8.2 Flash 动画 栏目 首页 制作 


1. 背景 制作 

(1) 新 建 Flash 文档 ,舞台 大 小 800X600px, 帧 频 为 12fps。 

(2) 修改 图 层 名 称 为 “背景 ”。 

(3) 从 images 目录 中 导入 tp6-1. jpg 到 “ 库 ”, 将 tp6-1. jpg 从 * 库 ?面板 拖 人 到 背景 层 ， 
在 背景 层 第 240 帧 插入 苦 止 帧 ,锁定 背景 层 。 

2. 制作 文字 形变 动画 

(1) 新 建 图 层 “ 文 字 ”, 在 “文字 ”图 层 第 1 帧 使 用 Edwardian Script ITC 字体 ,书写 红 
色 、 大 小 为 96px 的 文字 ”Welcome to”, 将 文字 调整 到 合适 的 位 置 , 使 用 两 次 “修改 ”| “分离 ” 


静态 网 站 制作 项 目 教程 


命令 ,将 文字 分 离 成 矢量 图 形 。 在 第 40 帧 .第 240 帧 插入 关键 帧 。 

(2) 在 “文字 ”图 层 第 120 帧 插入 空白 关键 帧 。 选 中 第 120 帧 ,使 用 Edwardian Script 
ITC 字体 ,书写 红色 、 大 小 为 96px 的 文字 “My Flash”, 将 文字 调整 到 合适 的 位 置 ,使 用 两 次 
“修改 "| 分离” 命令 ,将 文字 分 离 成 矢量 图 形 。 在 第 180 帧 插入 关键 帧 。 

(3) 选中 第 40 帧 ,创建 形变 动画 。 选 中 第 180 帧 ,创建 形变 动画 。 

(4) 锁定 “文字 ”图 层 。 

3. 制作 划船 运动 动画 

(1) 制作 * 船 ?图 形 元 件 。 

g@ 在 * 库 ?面板 中 新 建 图 形 元 件 * 船 ”。 

@ 在 元 件 编辑 窗口 中 绘制 一 个 船 和 船 夫 的 黑色 图 形 , 如 图 6-59(a) 所 示 。 

@ 绘制 一 个 无 边线 .灰白 线性 渐变 上 下 方向 填充 的 矩形 ,使 用 选择 工具 将 矩形 编辑 成 
梯形 放置 在 船上 ,如 图 6-59(b) 所 示 。 

@ 使 用 浅 灰 色 绘制 船体 倒影 ,如 图 6-59(c) 所 示 。 

@ 复制 .粘贴 梯形 ,使 用 "修改 "| 变形 ”|* 垂 直 翻 转 ” 命 令 将 梯形 垂直 翻转 ,调整 填充 效 
果 , 放 置 在 船舱 的 倒影 位 置 , 如 图 6-59(d) 所 示 。 


(a) (b) 


(©) (d) 
图 6-59 “ 船 ”元 件 制作 过 程 


(2) 制作 “划船 ”影片 剪辑 。 

@ 在 “ 库 ” 面 板 中 新 建 影 片 剪辑 元 件 “ 划 船 ”。 

@ 从 “ 库 ” 面 板 中 将 图 形 元 件 “ 船 ” 拖 入 到 第 1 帧 ,将 * 船 ?元 件 实例 缩小 到 100X40px 左 
右 大 小 ,在 第 40 帧 插入 静止 帧 。 

@ 插入 图 层 2, 使 用 直线 工具 绘制 一 个 浅黄 色 直线 ,将 该 直线 转换 为 图 形 元 件 “ 船 篇 ”。 
调整 “ 船 篇 ?元 件 实例 状态 ,如 图 6-60(a) 所 示 。 


(a) (b) 


图 6-60 “ 船 篇 ?元件 实例 状态 


第 6 章 Flash 网 页 动画 制作 2o9l 和 


@ 在 图 层 2 第 20 帧 .第 30 帧 插入 关键 帧 ,选中 第 20 帧 ,调整 * 船 篇 "元件 实例 状态 ,如 
图 6-60(b) 所 示 。 

@ 在 第 1 一 第 30 帧 之 间 创建 补 间 动 画 。 返 回 到 场景 ,结束 元 件 制作 。 

(3) 制作 划船 运动 动画 。 

g@ 插入 图 层 * 小 船 ”。 

@ 从 “ 库 ” 面 板 中 将 影片 前 辑 元 件 “ 划 船 ” 拖 入 到 “小 船 ”图 层 第 1 帧 。 将 “划船 "元 件 实 
例 放 置 在 舞台 左下 角 外 边 ,使 用 “窗口 "| “变形 "命令 打开 “变形 ”面板 ,使 “划船 ”元 件 实例 垂 
直 倾 斜 一 10"。 

@ 在 “小 船 ”图 层 第 240 帧 插入 关键 帧 ,将 “划船 "元件 实例 移动 到 舞台 左边 中 部 ,在 “小 
船 ”图 层 中 创建 补 间 动 画 。 

4. 导航 按钮 制作 

(1) 在 动画 中 新 建 一 个 “导航 ”图 层 。 

(2) 在 “公共 库 ” 面 板 中 挑选 一 个 喜欢 的 按钮 元 件 拖 和 “按钮 "图 层 的 第 1 帧 。 在 “ 库 ” 面 
板 中 选中 按钮 元 件 , 使 用 “编辑 ”按钮 对 按钮 元 件 进行 编辑 ,删除 按钮 的 标题 文本 。 

(3) 再 拖 和 人 3 个 按钮 元 件 实例 到 “导航 ”图 层 ,排列 在 舞台 下 方 ,给 4 个 按钮 元 件 实例 命 
名 为 al ,a2、a3、a4。 使 用 文本 工具 在 按钮 元 件 实例 al 上 书写 标题 文字 “首页 ”; 在 按钮 元 件 
实例 a2 上 书写 标题 文字 “家 乡 美 ” 在 按钮 元 件 实例 a3 上 书写 标题 文字 “探索 太空 ”; 在 按 
钮 元 件 实例 a4 上 书写 标题 文字 “思念 朋友 ”。 

(4) 在 场景 中 选中 按钮 元 件 实例 al ,打开 “动作 ”面板 ,在 “全 局 函数 ”|“ 影 片 剪 辑 控制 ” 
中 选择 on 命令 ,on 命令 事件 参数 选择 press, 在 “浏览 器 /网 络 ? 中 选择 getURL ,getURL 参 
数 中 填写 栏目 首页 文件 名 index. html。"“ 动 作 ” 面 板 中 的 脚本 内 容 为 : 

on (press) { 

getURL("index. html"); 

} 

(5) 仿照 为 按钮 元 件 实例 al 添加 控制 脚本 的 操作 ,依次 为 按钮 元 件 实例 a2、a3、a4 添加 
控制 脚本 。 按 钮 元 件 实例 a2* 动 作 ” 面 板 中 的 脚本 内 容 为 : 

on (press) { 


getURL( "prac6-1. html"); 
} 


按钮 元 件 实例 a3“ 动 作 ” 面 板 中 的 脚本 内 容 为 : 


on (press) { 
getURL("prac6-2. html"); 
} 


按钮 元 件 实例 a4* 动 作 ” 面 板 中 的 脚本 内 容 为 ; 


on (press) { 
getURL("prac6-3.html") ; 
} 
5. 发 布 动画 
保存 源 文件 ,将 prac6. html 文件 发 布 本 地 站 点 根 目录 中 ,将 prac6. swf 文件 发 布 到 本 
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地 站 点 根 目录 下 的 flashes 目录 中 。 


本 章 主要 介绍 了 Flash 的 基本 使 用 方法 和 基本 工具 ,内 容 包括 Flash 形变 动画 \ 干 涉 形 


6.9 小 结 


变动 画 


,运动 动画 ,轨迹 动 画 和 遮 沾 动画 的 基本 制作 方法 ,以 及 声音 ,按钮 和 影片 剪辑 在 动画 
中 的 应 用 。 其 中 简单 交互 动画 是 在 读者 不 必 掌 握 ActionScript 语言 的 基础 上 实现 的 ,更 多 
的 Flash 编程 知识 需要 读者 阅读 有 关 ActionScript 编程 的 书籍 。 本 章 的 许多 概念 都 是 在 动 


画 制 作 中 体现 的 ,要 掌握 Flash 工具 的 使 用 必须 要 多 练 、 多 做 。 


R= 


js 
一 安 


问题 ? 


6.10 习 题 


.如 何 对 舞台 及 舞台 中 的 对 象 进行 放大 和 缩小 ? 

. 怎样 改变 图 层 的 名 称 和 图 层 的 排列 顺序 ? 

.静止 帧 的 作用 是 什么 ? 

. 插入 关键 帧 和 插入 空白 关键 帧 有 什么 区 别 ? 

. 在 测试 和 发 布 动画 时 ,使 用 Enter、F12、Ctrl 十 Enter 键 有 什么 区 别 ? 
. 保存 文档 和 导出 影片 有 什么 区 别 ? 

.Flash 的 工具 能 否 修改 位 图 图 像 ? 

. 在 Flash 中 如 何 修改 渐变 填充 色 ? 

. 在 Flash 中 如 何 绘制 圆 角 矩形 和 五 角 星 形 ? 

.Flash 选择 工具 有 哪些 功能 ? 

. Flash* 魔 术 棒 设 置 ? 对 话 框 中 的 “ 阔 值 是 什么 意思 ? 

. 颜料 桶 工具 和 墨水 瓶 工 具 的 功能 有 什么 不 同 ? 

. 颜料 桶 工具 选项 中 的 “不 封闭 空隙 是 什么 意思 ? 

. 什么 是 “封套 "编辑? 

.如 何 给 文字 填充 渐变 色 ? 

. 什么 是 形变 动画 ? 如 何 创建 形变 动画 补 间 ? 

. 动画 变化 结束 后 如 果 需 要 对 象 在 舞台 上 停留 一 段 时间 如 何 实现 ? 
. 如 何 实现 元 件 实例 的 倾斜 .旋转 或 缩放 ? 

. 交换 元 件 有 什么 作用 ? 

. 怎样 为 元 件 实例 命名 ? 

. 如 何 制 作 匀 变速 运动 动画 ? 

. 什么 是 元 件 实例 的 中 心 点 和 注册 点 ? 怎样 改变 元 件 实例 的 中 心 点 位 置 ? 
. 声音 “同步 "属性 的 事件 .开始 和 数据 流 有 什么 不 同 ? 
.如 何 添加 场景 选择 场景 和 修改 场景 名 称 ? 

. 在 Flash 动作 脚本 中 可 以 编程 的 对 象 有 哪些 ? 为 元 件 添 加 动作 脚本 需要 注意 什么 
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6.11 实 训 :“ 我 的 Flash” 栏 目 制作 


1. 实 训 目的 

熟悉 Flash 动画 工具 的 使 用 ,练习 Flash 动画 制作 技能 以 及 使 用 Flash 制作 网 页 。 

2. 实 训 任务 与 实 训 指导 

本 章 实 训 任务 包括 如 下 两 部 分 内 容 。 

(1) 完成 前 面 实 训 任务 中 Flash 动画 的 制作 。 

(2) 仿照 教学 项 目 网 站 中 “Flash 动画 ”栏目 设计 .按照 实 训 任务 中 的 要 求 完 成 实 训 网 站 
项 目 中 “我 的 Flash” 栏 目 制作 ,并 发 布 到 远程 Web 服务 器 网 站 中 。 


实 训 任 务 6-1; 文字 移动 动画 制作 


使 用 自 备 图 片 和 宿舍 名 称 制作 文字 移动 动画 ,完成 实 训 任务 4-4 中 Flash 动画 {14-1. swf 
的 制作 。 训 练 Flash 运动 动画 制作 技能 。 

(1) 准备 一 张 宿舍 的 集体 照片 ,使 用 Fireworks 将 照片 尺寸 修改 为 410X 90px, 不 透明 
度 修改 为 40% ,导出 备用 。 

(2) 新 建 Flash 文档 ,舞台 大 小 为 410X 90px, 保 存 到 本 地 站 点 flashes 目录 中 ,文件 名 
使 用 fl4-1. fla。 

(3) 将 图 层 1 改名 为 “背景 ”, 将 准备 的 图 片 导入 到 舞台 背景 层 中 。 在 背景 图 层 的 第 120 
帧 插入 静止 帧 ,锁定 该 图 层 。 

(4) 新 建 图 层 , 修 改 图 层 名 称 为 “文字 ”。 在 “文字 ?图 层 的 第 1 帧 书写 文字 XXXXXx 
宿舍 ”, 文 字 大 小 .颜色 .字体 自己 选择 。 选 中 文字 ,使 用 F8 键 将 文字 转换 为 图 形 元 件 。 

(5) 在 第 40 帧 .第 80 帧 ,第 120 帧 插入 关键 帧 ,选中 第 40 帧 ,修改 文字 的 位 置 .颜色 属 
性 ; 选中 第 80 帧 ,修改 文字 的 位 置 .颜色 属性 。 

(6) 使 用 Shift 键 协助 选中 所 有 帧 ,创建 补 间 动 画 。 

(7) 保存 文件 ,预览 动画 效果 。 

(8) 导出 影片 到 flashes 文件 夹 中 ,文件 名 使 用 fl4-1. swf。 

(9) 在 本 地 站 点 中 浏览 prac4. html, 查 看 动画 效果 。 

(10) 将 新 制作 的 fl4-1. swf 发 布 到 远程 Web 站 点 中 ,浏览 效果 。 

(11) 保存 本 地 站 点 。 


实 训 任 务 6-2; 定 马 灯 " 动画 制作 


使 用 宿舍 同学 照片 制作 * 走 马 灯 ?效果 的 动画 ,完成 实 训 任务 4-2 中 Flash 动画 fl4-2. swf 
的 制作 。 训 练 Flash 运动 动画 制作 技能 。 

(1) 在 Fireworks 中 将 宿舍 所 有 同学 的 个 人 照片 导入 到 一 个 960X100px 的 画布 中 , 照 
片 尺寸 修改 为 100px, 横 向 排列 在 一 起 ,总 宽度 为 960px, 导 出 备用 。 

(2) 新 建 Flash 文档 ,舞台 大 小 为 960 X100px, 帧 频 调整 为 24fps。 保 存 到 本 地 站 点 
flashes 目录 中 ,文件 名 使 用 fl4-2.fla。 

(3) 在 图 层 1 中 导入 备用 的 图 片 ,转换 成 元 件 * 照 片 ”。 在 第 480 帧 插入 关键 帧 ,将 “ 照 
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片 ”元 件 实例 水 平移 出 到 舞台 左 侧 , 创 建 补 间 动 画 。 

(4) 插入 图 层 2, 在 图 层 2 的 第 1 帧 中 拖 入 “照片 元件 实例 ,放置 在 舞台 右 侧 与 舞台 
缘 对 齐 。 在 第 480 帧 插入 关键 帧 ,将 “照片 元件 实 例 水 平移 动 到 舞台 中 ,创建 补 间 动 画 。 

(5) 保存 文件 ,预览 动画 效果 。 

(6) 导出 影片 到 flashes 文件 夹 中 ,文件 名 使 用 fl4-2. swf。 

(7) 在 本 地 站 点 中 浏览 prac4-2. html, 查 看 动画 效果 。 

(8) 将 新 制作 的 fl4-2. swf 发 布 到 远程 Web 站 点 中 ,浏览 效果 。 

(9) 保存 本 地 站 点 。 


实 训 任 务 6-3: 旋转 运动 动画 制作 


使 用 images 目录 中 的 tp1-2. gif 图 片 ,完成 实 训 网 站 项 目 首页 index. html 中 Flash 动 
夯 fl1-1. swf 的 制作 。 训 练 绕 中 心 旋转 运动 动画 制作 技能 。 

(1) 新 建 Flash 文档 ,舞台 大 小 为 130X170px, 帧 频 为 12fps。 保 存 到 本 地 站 点 flashes 
目录 中 ,文件 名 使 用 fl1-1. fla。 

(2) 导入 images\tp1-2. gif 文件 ,将 图 片 转换 成 元 件 “ 风 车 " 放 在 第 1 帧 ,在 第 12 帧 插入 
关键 帧 ,创建 补 间 动 画 。 

(3) 选中 动画 过 渡 帧 ,在 “属性 ?面板 中 设置 “旋转 ?为 “ 顺 时 针 ”“1? 次 。 

(4) 新 建 一 个 图 层 ,在 新 建 图 层 中 书写 版 权 信息 : XX 班 X XX。 

(5) 保存 文件 ,预览 动画 效果 。 

(6) 导出 影片 到 flashes 文件 夹 中 ,文件 名 使 用 fl1-1. swf。 

(7) 在 本 地 站 点 中 浏览 网 站 首页 index. html, 查 看 动画 效果 。 

(8) 将 新 制作 的 fl1-1. swf 发 布 到 远程 Web 站 点 中 ,浏览 效果 。 

(9) 保存 本 地 站 点 。 

注意 ,如 果 在 Dreamweaver 中 删除 了 index. html 中 的 风车 动画 ,再 插入 自己 制作 的 动 
画 , 浏 览 时 会 出 现 动画 的 白色 背景 。 插 入 一 个 不 显示 动画 背景 的 Flash 动画 ,需要 使 用 " 透 
明 Flash” 技 术 , 实 现 透明 Flash 有 以 下 两 种 方式 。 

(1) 发 布 为 “透明 无 窗口 ” Flash 动画 。 在 Flash 动画 “发 布设 置 " 的 HTML 选项 卡 中 
有 “窗口 模式 ”选项 ,其 中 默认 模式 是 “窗口 ", 选 择 “ 透 明 无 窗口 "模式 会 发 布 背景 为 透明 的 
Flash 动画 ,但 此 项 设置 很 多 情况 下 会 无 效 。 

(2) 修改 HTML 代码 。 在 使 用 Dreamweaver 编辑 网 页 文档 时 , 当 网 页 中 插入 了 Flash 
动画 后 ,在 代码 窗口 中 会 看 到 这 样 一 段 代 码 ， 

<object classid= "clsid: D27CDB6E-AE6D-11c{-96B8-444553540000" codebase= "http://download. 

macromedia. com/ pub/ shockwave/ cabs/ flash/ swflash. cab # version= 7, 0, 19,0" width="360" height= 

"200" 之 


<param name= "movie" value="xxxxx. swf" /> 
<param name= "quality" value="high" /> 
embed src="xxxxx. sw{" quality= "high" pluginspage= "http://www. macromedia. com/go/ 
getflashplayer" type= "application/x-shockwave-flash" width= "360" height="200"<</embed> 


</object> 


其 中 ,二 param 二 为 参数 。 为 了 实现 Flash 动画 的 透明 背景 ,可 以 添加 如 下 参数 ; 
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< 所 param name="wmode" value= "transparent"> 
表示 窗口 模式 为 “透明 ”(transparent) 模 式 。 修 改 后 的 参数 部 分 应 该 为 ; 


<param name= "movie" value="xxxxx. swf{" /> 
<param name= "quality" value= "high" /> 
=param name 一 "wmode" value= "transparent"> 


实 训 任务 6-4: 家 乡 美 " 动画 网 页 制作 


使 用 自 备 图 片 ,按照 教学 项 目 中 该 网 页 动画 风格 ,制作 实 训 网 站 项 目 中 的 “家 乡 美 ” 动 画 
网 页 prac6-1. html。 训 练 谈 淖 动画 制作 技能 。 

(1) 准备 3 张 家 乡 风光 的 照片 ,照片 尺寸 修改 为 533X400px 大 小 ,保存 备用 。 

(2) 新 建 Flash 文档 ,舞台 大 小 为 800 X 600px, 保 存 源 文件 到 本 地 站 点 根 目录 下 的 
flashes 文件 夹 中 ,文件 名 使 用 prac6-1. fla。 参 照 6. 5 节 动 画 制作 方法 ,使 用 自 备 的 图 片 制 
作 “ 家 乡 美 "动画 网 页 。 

(3) 发 布 动 画 时 注意 ,prac6-1. html 要 发 布 到 本 地 站 点 根 目录 下 ,prac6-1. swf 文件 要 
发 布 到 本 地 站 点 根 目录 下 的 flashes 文件 夹 中 。“ 返 回 "按钮 返回 的 网 页 应 该 是 prac6. html。 

(4) 在 本 地 站 点 中 浏览 网 页 prac6-1. html, 查 看 动画 效果 。 

(5) 将 prac6-1. html 和 prac6-1. swf 发 布 到 远程 Web 站 点 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac6-1.html 


检查 网 页 发 布 是 否 正确 。 
(7) 保存 本 地 站 点 。 


实 训 任务 6-5: 穆 索 太空" 动画 网 页 制作 


使 用 images 目录 中 的 tp6-6. jpg、tp6-7. gif、tp6-8. jpg tp6-9. gif 图 片 ,制作 实 训 网 站 项 
目 中 多 场景 的 交互 式 动画 网 页 prac6-2. html。 训 练 多 场景 动画 、 交 互动 画 制作 技能 。 

(1) 新 建 Flash 文档 ,舞台 大 小 为 800X600px, 保 存 源 文件 到 本 地 站 点 根 目录 下 的 flashes 
文件 夹 中 ,文件 名 使 用 prac6-2. fla。 将 images 目录 中 的 tp6-6. jpg、tp6-7. gif、tp6-8. jpg、 
tp6-9. gif 图 片 导 入 到 库 中 ,参照 6. 6 节 网 页 制作 方法 ,制作 实 训 网 站 项 目 中 多 场景 的 交互 
式 动画 网 页 prac6-2. html。 在 每 个 场景 中 的 背景 图 层 中 加 入 作者 信息 : X X 班 X XX。 

(2) 将 prac6-2. html 文件 发 布 到 本 地 站 点 根 目录 下 ,将 prac6-2. swf 文件 发 布 到 本 地 站 
点 根 目 录 下 的 flashes 文件 夹 中 。 

(3) 在 本 地 站 点 中 浏览 网 页 prac6-2. html, 查 看 动画 效果 。 

(4) 将 prac6-2. html 和 prac6-2. swf 发 布 到 远程 Web 站 点 中 。 

(5) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac6-2. html 


检查 网 页 发 布 是 否 正 确 。 
(6) 保存 本 地 站 点 。 
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实 训 任务 6-6: 思念 朋友 "动画 网 页 制作 


使 用 images 目录 中 的 tp6-10. jpg 图 片 和 自己 朋友 的 3 张 照片 ,制作 实 训 网 站 项 目 中 
“思念 朋友 ”网 页 prac6-3. html。 训 练 影片 剪辑 .形变 喧 音 动画、 逐 帧 遮 单 动画 、 搬 和 人 声音 等 
动画 制作 技能 。 

(1) 新 建 Flash 文档 ,舞台 大 小 为 800 X 600px, 保 存 源 文件 到 本 地 站 点 根 目录 下 的 
flashes 文件 夹 中 ,文件 名 使 用 prac6-3. fla。 将 images 目录 中 的 tp6-10. jpg 图 片 导入 到 库 
中 。 从 Internet 上 下 载 一 首 歌曲 ,导入 到 “ 库 ” 中 。 

(2) 准备 3 张 朋友 的 照片 ,使 用 Fireworks 编辑 照片 的 大 小 。 

(3) 参照 6.7 节 网 页 制作 方法 ,制作 实 训 网 站 项 目 中 “思念 朋友 ”动画 网 页 prac6-3. html。 

(4) 将 prac6-3. html 文件 发 布 到 本 地 站 点 根 目录 下 ,将 prac6-3. swf 文件 发 布 到 本 地 站 
点 根 目录 下 的 flashes 文件 夹 中 。 

(5) 在 本 地 站 点 中 浏览 网 页 prac6-3. html, 查 看 动画 效果 。 

(6) 将 prac6-3. html 和 prac6-3. swf 发 布 到 远程 Web 站 点 中 。 

(7) 在 本 地 浏览 器 地 址 栏 输入 : 


http://Web 服务 器 域名 地 址 /学 号 /prac6-3. html 


检查 网 页 发 布 是 否 正确 。 
(8) 保存 本 地 站 点 。 


实 训 任务 6-7;， 我 的 Flash" 动画 网 页 制作 


使 用 images 目录 中 的 tp6-1.jpg 图 片 , 制 作 实 训 网 站 项 目 中 “我 的 Flash” 栏 目 首页 网 页 
prac6. html。 训 练 影片 剪辑 、 运 动 动画 、 导 航 按钮 等 动画 制作 技能 。 

(1) 新 建 Flash 文档 ,舞台 大 小 为 800 X 600px, 保 存 源 文件 到 本 地 站 点 根 目 录 下 的 
flashes 文件 夹 中 ,文件 名 使 用 prac6. fla。 将 images 目录 中 的 tp6-1. jpg 图 片 导入 到 库 中 。 

(2) 参照 6. 8 节 栏 目 首页 制作 方法 ,制作 实 训 网 站 项 目 中 “我 的 Flash” 栏 目 首页 ,其 中 
文字 形变 动画 内 容 使 用 “我 的 Flash” 和 “XX 班 X XX”。 

(3) 将 prac6. html 文件 发 布 到 本 地 站 点 根 目录 下 ,将 prac6. swf 文件 发 布 到 本 地 站 点 
根 目 录 下 的 flashes 文件 夹 中 。 

(4) 在 本 地 站 点 中 浏览 网 页 prac6. html, 查 看 动画 效果 。 

(5) 将 prac6. html 和 prac6. swf 发 布 到 远程 Web 站 点 中 。 

(6) 在 本 地 浏览 器 地 址 栏 输 入 : 


http://Web 服务 器 域名 地 址 /学 号 
从 首页 开始 浏览 发 布 的 网 站 ,检查 所 有 网 页 显示 是 否 正确 。 


课程 标准 


学 习 内 容 或 具 参考 
或 项 目 体 工 作 任务 区 二 要 过 课时 
1 网 站 项 了 解 网 站 的 基本 概念 .网 站 开发 开发 流程 ; 掌握 网 页 文档 
目 描述 网 站 与 网 站 发 布 结构 、 网 站 首页 默认 文件 名 ,使 用 “记事 本 ”编辑 网 页 方法 , | 4 
CuteFtp 使 用 方法 与 网 站 发 布 方 法 
<p>,<div>,<span>、<center>、<<br> 及 align 属 
性 ; 过 hr 过 > 标记 及 其 属性 ; 一 font> 标 记 和 face,size、color 属 
六 本 珊 测 疯 作 性 及 颜色 表示 方法 ; <b>、<s>>、<i>>、<u>、<sub>、 
二 sup 二 标记 及 特殊 字符 输入 方法 。 注 释 标记 
网 站 标题 网 页 制作 本 大 属性 计量 必 汰 o body> 灶 记 的 background, bgcolor、 
topmargin、leftmargin 属性 
图 像 标 记 二 img 志 的 src、alt、width、height、border、hspace、 
图 像 站 页 制作 。 | vspace 属性 ,相对 路 径 的 概念 
2. HTML | 图 文 混 排 网 页 制作 ”| 图 文 混 排 方法 i 
标记 栏目 表格 标记 过 table 二 及 属性 ; 过 tr > 及 属性 ; 二 td 二 及 属 
制作 表格 布局 网 页 制作 | 但， 单元 格 合并 方法 。 页 面 表格 布局 2 
去 a>> 标 记 、.URL、 相 对 路 径 、 绝 对 路 径 ; href ,target 属性 ， 
导航 栏 网 页 制作 。 | 命名 钳 记 标记 ,图 像 超 链接 
版 权 页 面 制作 电子 邮件 超 链接 1 
了 <<marquee> 标 记 ,鼠标 悬 停 效 果 ; 一 embed>、 王 bgsound> 
el de 标记 与 背景 音乐 ,网 页 过 渡 效 果 , 点 击 下 载 超 链接 , 头 部 | 2 
页 面 制作 
标记 
框架 集 及 框架 网 页 | 框架 与 框架 集 ,框架 布局 技术 ,框架 属性 ,框架 名 的 使 用 ， 
制作 超 链 接 target 属性 
发 光 文字 效果 页 面 | CSS 样 式 表 的 定义 和 使 用 方法 ; CSS 定位 属性 ; 字体 属 8 
制作 性 ; 透明 滤 镜 ; 发 光 滤 镜 
相框 效果 页 面 制作 ”| CSS 边框 属性 、 定 位 属性 和 
3. CSS 样 | 区 域 文字 效果 页 面 
式 栏目 制作 | 制作 CSS 文本 属性 、 区 域 设置 
放射 状 滤 镜 效 果 页 
面 制作 CSS 透明 滤 镜 1 


CSS 栏目 首页 制作 


嵌入 式 框架 ,CSS 镜像 滤 镜 ; CSS 样式 
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续 表 
学 习 情境 学 习 内 容 或 具 参考 
或 项 目 体 工作 任务 中 课时 
Dreamweaver 工具 使 用 ; 网 站 管理 与 网 站 发 布 ; CSS 定义 
Ws 与 使 用 ; 基本 网 页 编辑 方法; 图 文 混 排 E 
4 网 页 编 | 。 可 插入 Flash 动画 ; 设置 状态 栏 文本 行为 ; 层 及 层 的 操作 ; 
辑 工具 栏目 | “全 为 "网 下 制 作 | 显示 一 隐藏 屋 行为 
制作 “热点 图 像 "页 面 制作 | 图 像 热点 工具 ,图 像 热点 超 链接 ; 设置 层 文本 行为 3 
栏目 首页 制作 er GIF 动画 ; 交换 图 像 行为 ; 调用 JavaScript . 
网 页 图 像 知 识 ; Fireworks 基本 使 用 ; 图 像 的 优化 与 导出 ; 
颜色 工具 ; 选择 工具 ; 矢量 工具 ; 填充 效果 ; 矢量 蒙 版 效 
bd 果 图 像 制 作 ;“ 不 透明 度 ” 选 择 ;“ 混 合 模式 ”选择 ;“ 边 缘 ” . 
选择 “羽化 ” 
位 图 图 像 效 果 位 图 工具 ,位 图 蒙 版 编辑 FE 
5. 图 像 编 | GIF 动画 GIF 逐 帧 动画 、 选 择 动画 、 分 散 到 帧 动画 ; 共享 背景 层 a 
辑 工具 栏目 Logo 制作 渐变 填充 ,纹理 选择 ,纹理 总 量 ; 滤 镜 ; 文本 附加 到 路 径 ; 
制作 “ 索引 色 透明 导出 
矢量 蒙 版 效果 图 像 ; 路 径 运算 ; 任意 变形 工具 ; 魔术 棒 工 
Banner 制作 具 ; 选取 框 工具 ; 添加 选区 ; 添加 蒙 版 ; 图 层 操作 ; 钢笔 4 
工具 ; 调整 颜色 、 色 相 / 饱 和 度 调整 
Fireworks 按钮 制作 ;切片 与 切片 行为 ; 资源 样式 ; Web 切 
栏目 页 面 制 作 片 ; 网 页 导出 4 
和 Flash 工具 使 用 文档 操作 、 时 间 轴 面板 ,形变 动画 ,运动 动 
Fes" 动 西 基础 | 而 ,这 单 动画, 透明 Flash 
“家 乡 美 "动画 网 页 “| 遗 音 动画、 运动 动 画 ; 复制 ,粘贴 帧 ; 按钮 动作 脚本 3 
6. Flash 动 | 。 SS 轨迹 动画 、 多 场景 动画 ; 为 关键 帧 添加 动作 脚本 ; 按钮 交 
画 栏目 制作 探索 太空 "动画 网 页 互 控制 3 
“思念 朋友 * 动 画 网 页 pt 声音 、 逐 帧 遮 音 
栏目 首页 文字 形变 动画 ,影片 剪辑 ; Flash 导航 按钮 4 
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